在vue中根据解析的html内容动态插入组件

Question

1. 使用了segmentfalut的hyperdown解析器解析markdown语法的博客.

2. 解析成html插入后<img>显示有新的需求,需要点击弹出模态框用源尺寸打开

3. element-ui 有相应的组件,但是不知道如何插入

原始html是不会解析组件的我知道行不通
以前没学用bootstrap + jquery 的方法 也不能插入vue组件

不知道如何对解析出来的html字符串里面的<img>元素,来动态绑定这个模态框 
说白了我就是要实现这个动态的图片放大功能.

目前暂时自己用原生撸了个简陋的js...额 我自己不满意, 不符合vue设计理念感觉

Answer 1

既然用Vue，就不要用jQuery了，你这个需求需要使用动态模板（dynamic template），步骤这样：1 需要用vue的full版本（包括compiler），而不仅是runtime版本，在webpack配置中需要增加一个alias，类似vue:&nbsp;'vue/dist/vue.js'2.然后在模板文件中，使用下面的方式来嵌入动态模板<component&nbsp;:is="dynamicTemplate()"&nbsp;/>dynamicTemplate函数需要返回处理好的模板内容，类似：return&nbsp;Vue.compile('<div>'&nbsp;+&nbsp;dynamicContent&nbsp;+'</div>')之所以再套一个div，是因为Vue的模块需要单根。如果在动态模板内容中依赖一些组件，这些组件需要提前注册好，可以使用vue的全局模块注册。