vuejs 如何将渲染后的组件插入到任意指定的Dom位置中，而不是引用组件

Question

不同于一般的组件引用方法。
现在有个需求，就是将图片插入到html中，位置是光标的位置，不是一般的直接插入dom的操作方式
这里的图片使用的是vue组件，是将渲染的组件插入到html标签内，

img组件没有固定引用位置，直接生成
如同利用document.createElement('img')生成img标签，然后将img插入到任意位置

而插入图片这个动作是
1、将图片src传递给img组件，
2、img组件根据传入的参数渲染成img标签，
3、在当前光标的位置，将渲染的img标签插入进来，

要求是：img要用组件实现，这样方便管理，每个图片有自己的属性，保持各组件之间的数据同步

比如：
下图为组件和传入的参数，图中的File是直接从input[type=file]获取的

单个组件渲染后的内容imgDom

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/**********" />

使用execCommand操作插入动作，

document.execCommand('insertHtml', false, imgDom) // 此处的imgDom即为生成的组件

懂的请不吝赐教，多谢！！

Answer 1

你需要$compiler服务，具体操作也很简单：

const template = `<div>{{name}}</div>`;
const render = Vue.compile(template).render；

然后创建对应的实例，append到对应的dom上面。