v-html或类似方式渲染的元素无法绑定vue事件的解决方案

最新推荐文章于 2023-01-14 11:58:18 发布

原创最新推荐文章于 2023-01-14 11:58:18 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

14 篇文章

订阅专栏

博客指出使用Vue的v-html渲染带dom标签字符串时，标签内绑定的事件无法指向methods里的事件。给出的解决方案是自定义标签，接受html参数并在template中渲染，object参数需在创建组件时以局部变量方式赋给子组件，还提到因Vue默认渲染方式需引入Vue。

需要渲染带有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。
以上代码不保证可以运行，我只是将每一步需要的单独提出来展现。

@快乐是一切