v-html或类似风湿渲染的元素无法绑定vue事件的解决方案
2021/6/4 10:25:35
本文主要是介绍v-html或类似风湿渲染的元素无法绑定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。
以上代码不保证可以运行,我只是将每一步需要的单独提出来展现。
@快乐是一切
这篇关于v-html或类似风湿渲染的元素无法绑定vue事件的解决方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist