Vue 使用v-html插入模版，绑定事件v-on:click事件不能触发,以及子组件无法渲染

在用vue做项目中，发现了一个问题:当想利用v-html将模板渲染到页面中的时候，发现模板中通过v-on:click绑定的事件不能触发，而且模板中引用的子组件也不能渲染成功![v-html模板中用到的子组件audio-play](https://img-blog.csdnimg.cn/20190518160511763.png?x-oss-process=image/watermark,typ..

钢墩儿

18463人浏览 · 2019-05-18 16:16:47

钢墩儿 · 2019-05-18 16:16:47 发布

在用vue做项目时，发现:

       当想利用v-html将模板渲染到页面中的时候，发现模板中通过v-on:click绑定的事件不能触发，而且模板中引用的子组件也不能渲染成功
v-html模板中用到的子组件audio-play
       这是因为v-html里的东西，调不到methods的方法，因为methods里的代码是编译后在浏览器里运行的，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
       这个时候，为了能作为Vue模板解析，我们需要使用render函数进行模板的渲染
可以在components中注册一个组件，利用render函数以及props将v-html模板渲染上
       这样就可以成功的将v-html模板作为Vue 模板进行编译