场景
- 需要动态添加一段Html到页面，但是新添加的页面@click等事件不执行
原因
- vue的
template中的内容是需要编译以后才能运行，绑定的事件也是编译后才可以运行，动态添加的Html实际上是加入了编译后的页面，所以里面的@click这种方法不会被再次编译，于是就不会执行
解决方案
- 在网上查阅大量资料后发现有两种方法解决这个问题：
- 1，把动态Html中的事件注册成全局事件，通过onclick调用全局事件；
- 2，把动态Html中调用
Vue.extend()编译一次，把编译后的代码插入页面；
开搞
注册全局事件方法
<template>
<div>
<div><button type="button" @click="addHtml">测试</button></div>
<div id="testId"></div>
</div>
</template>
<script>
export default{
created() {
window.testBtn=this.testBtn
},
methods:{
addHtml(){
let html=`<button type="button" οnclick="testBtn(this)">按钮</button>`;
$('#testId').append(html)
},
testBtn(obj){
console.log('this is testBtn',$(obj));
}
}
}
</script>
window.testBtn=this.testBtn – 注册了一个全局事件，编译后可以直接调用，不要加括号onclick="testBtn(this)" – 通过Html自带的onclick去调用全局方法，- 这种方法多半配合
Jquery来使用，因为jquery可以通过获取dom来操作下面的步骤，this是控件本身 $(obj) – jquery包裹的对象，就是动态Html的dom，通过获取他可以做其他操作- 优点：事件较为简单
- 缺点：实际上这是一种曲线救国，可以执行，但是Vue的
this中的参数不能使用了，但可以配合jquery来操作下面的功能 jquery在vue中使用看上篇文章
编译Html再插入方法
<template>
<div>
<div><button type="button" @click="addHtml">测试</button></div>
<div id="testId"></div>
</div>
</template>
<script>
import Vue from 'vue/dist/vue.esm.js'
export default{
data(){
return{
d:'dddd'
}
},
methods:{
addHtml(){
let that=this
const testComponent = Vue.extend({
template: `<div @click="open">{{text}},${that.d}</div>`,
data: function () {
return {
text: '默认值'
}
},
methods:{
open(){
this.text='修改值'
}
}
})
const extendComponent = new testComponent().$mount()
$('#testId').append(extendComponent.$el)
}
}
}
</script>
Vue.extend() – 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。https://cn.vuejs.org/v2/api/index.html#Vue-extend$mount – 手动挂载 https://blog.csdn.net/github_37516320/article/details/78321391addHtml中的方法就是把动态html手动编译，手动挂载，手动插入页面${that.d} – 使用初始挂载的参数- 优点：可以使用Vue的this，可以使用初始挂载的参数
- 缺点：复杂度较高
参考资料
https://www.cnblogs.com/hentai-miao/p/10271652.html- https://cn.vuejs.org/v2/api/index.html#Vue-extend
- https://blog.csdn.net/wxl1555/article/details/83187647
- https://segmentfault.com/a/1190000020061342
- https://blog.csdn.net/m0_38004177/article/details/106375775
- https://www.jianshu.com/p/398825b673e7
- https://blog.csdn.net/weixin_42633131/article/details/100579381?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242
|