前端 - 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>