Vue components in user-defined markdown

2020-04-28 02:56发布

问题:

I need to instantiate zero or more Vue components within HTML generated by a markdown rendering plugin. The component count and props for each are defined in the markdown. (I control the markdown plugin.)

instead of normal template syntax:
 <my-component :key="uid_var"></my-component>

markdown plugin would generate HTML:
 <div id="uid">replaced by component</div>

which we pass to vue in a template:
 <div v-html="md.render(src, {map:myCompMap})"></div>

This article suggests the following
https://css-tricks.com/creating-vue-js-component-instances-programmatically/

var ComponentClass = Vue.extend(MyComponent);
var instance = new ComponentClass({
    propsData: { input: 'xyz' },
});
instance.$mount('#uid');

But this is user-written markdown, re-rendered on every keystroke, so we should re-use component instances. Questions...

  1. Do I call instance.$mount('#uid') after each md.render() pass?

  2. Do I call instance.$destroy() if a later md.render() pass drops a component?

  3. Do I need a key attribute in the markdown, e.g. <div id="uid" key="uid">? I suspect the above achieves what a key provides in vue templates.