需要渲染带有dom标签的字符串的时候,常规的使用v-html只能渲染原始的标签元素,在标签中使用 @click 之类方式绑定的事件无法指向到 methods 里面的事件。
解决方案:
<template>
<div>
<contentHtml :html="getContent()" :data="{}" />
</div>
</template>
<script>
import Vue from 'vue/dist/vue.esm.js'
export default {
components: {
contentHtml: {
props: {
html: String,
data: Object
},
render (h) {
let _data = this.data
const com = Vue.extend({
name: 'content-html',
template: this.html,
data () {
return {
data: _data
}
},
methods: {
spanClick (val) {
console.log(val, this.data) // 输出:这是参数, {}
}
}
})
}
}
},
methods: {
getContent () {
let param = '这是参数'
return `<span @click="spanClick('${param}')"> 这里是标签内容 </sapn>`
}
}
}
</script>
如上示例: 自定义一个contentHtml
标签,接受需要渲染的html参数,然后在template中将给定的html渲染出来,object参数在子组件里面无法直接获取,只有在创建组件的时候,通过局部变量的方式赋给子组件,或许有其他更合理的方式。
在子组件中获取到最外层组件使用 this.$parent.$parent
由于vue默认的渲染方式,需要使用import Vue from 'vue/dist/vue.esm.js'
引入vue。
以上代码不保证可以运行,我只是将每一步需要的单独提出来展现。