现象:后端返回到前端的是html格式的数据,前端用v-html
解析渲染,例如:<span @click='add()'>点击</span>
,span标签成功渲染,但是绑定的事件无法触发
原因:vue没有将其作为vue的模板解析渲染 解决方法:不用v-html
而是component
模板编译
<template>
<div>
父组件
<div class='parent' id='parent'></div>
</div>
</template>
<script>
import Vue from 'vue'
var MyComponent = Vue.extend({
template: '<span @click='add()'>点击</span>',
methods: {
add() {
console.log('触发点击事件');
},
}
})
let component=new MyComponent().$mount()
export default {
data() {
return {
}
},
methods: {
},
mounted() {
document.getElementById('parent').appendChild(component.$el);
}
}
</script>
复制代码
用到的API
Vue.extend(options)
基础Vue
构造器,创建一个“子类”vm.$mount()
可以使用vm.$mount()
手动地挂载一个未挂载的实例
所有评论(0)