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

Question

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

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

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

Answer 1

自定义指令：

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>