Javascript 动态地将组件标记传递给Vue实例

我目前正在开发一些软件，允许用户将HTML片段放入网页，我的VueJS堆栈将动态呈现博客文章

我正试图找到一种方法，将组件标记动态呈现到给定的

中，而不在该

中声明Vue组件标记，以避免客户混淆

这是工作的一个示例代码：

Vue.component（'live-blog'{
道具：['id'，'title']，
模板：“{{title}}”，
});
const liveBlogs=新的Vue({
el:“#实时博客”，
数据：{
博客：[]，
},
方法：{
getLiveBlogs:function（）{
request.get（'/read/'+id）
.然后（功能（响应）{
liveBlogs.blogs=response.data.data；
})
}
},
安装的（）{
这是getLiveBlogs（）；
}
});

我想做什么

我希望能够去掉组件标记，这样我的客户机只需复制和粘贴以下代码。我可能会添加更多的组件和功能，不希望这个嵌入的规模不断扩大

一旦检测到目标

，javascript应该处理组件数据的动态注册和呈现

到目前为止我所尝试的

我曾尝试通过

this.el.innerHTML=componentMarkup

传递组件标记，但没有成功

---

使用VueJS是否可以做到这一点

您需要做的就是将模板作为字符串模板从DOM移动到主组件中。只要页面上有一个

，它就可以正常工作

Vue.component（'live-blog'{
道具：['id'，'title']，
模板：“{{title}}”，
});
新Vue({
el:“#实时博客”，
模板：`
`,
数据（）{
返回{
博客：[]，
};
},
方法：{
getLiveBlogs（）{
request.get（'/read/'+id）
。然后（响应=>{
this.blogs=response.data.data；
});
},
},
安装的（）{
这是getLiveBlogs（）；
},
});

吟游诗人会为你写歌曲。非常感谢你！