vue中怎么在innerHTML添加vue组件呢？

作者站长头像
站长
· 阅读数 22

我有一个Vue组件（Highlight.vue），现在写一个Markdown组件，要复用这个Highlight.vue组件，markdown中解析代码模块是通过js回调方式的，示例如下：

require('markdown')({
    highlight: (code, lang) => {
        // 需要在此处使用Hightlight.vue组件（直接写无法生效）
        return '<Highlight code="code" lang="lang"></Highlight>'
    }
});

各位大佬，有没有办法解决这种插入vue组件代码的？

回复
1个回答
avatar
test
2024-06-29

自定义指令：

Vue.directive('markdown', {
  bind(el, binding, vnode) {
    const markdown = require('markdown')({
      highlight: (code, lang) => {
        const Highlight = Vue.extend(vnode.context.$options.components.Highlight);
        const component = new Highlight({
          propsData: { code, lang }
        }).$mount();

        return component.$el.outerHTML;
      }
    });
    el.innerHTML = markdown.parse(el.textContent || '');
  }
});

然后，你可以在你的模板中使用这个自定义指令，就像这样：


<template>
  <div v-markdown="markdownContent"></div>
</template>

<script>
export default {
  data() {
    return {
      markdownContent: `
    console.log('Hello, world!');
    ```
  `
};

}};</script>

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容