欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > vue >内容正文

vue

Vue封装下拉框组件时,为document绑定原生事件addEventlistener(click“),切换页面之后事件还未被摧毁...

发布时间:2024/7/5 vue 6 豆豆
如意编程网 收集整理的这篇文章主要介绍了 Vue封装下拉框组件时,为document绑定原生事件addEventlistener(click“),切换页面之后事件还未被摧毁... 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: false, 7 actveName: "", 8 selContent: "请选择" 9 }; 10 }, 11 mounted() { 12 console.log("我被创建了"); 13 this.$nextTick(function() { 14 document.addEventListener("click",this.outClick); 15 }); 16 }, 17 beforeDestroy(){ 18 console.log("我被销毁了"); 19 document.removeEventListener("click",this.outClick); 20 }, 21 methods: { 22 isShowSel() { 23 this.isactive = !this.isactive; 24 }, 25 light(name) { 26 this.actveName = name; 27 this.selContent = this.actveName; 28 this.$emit("selectVal", this.actveName); 29 }, 30 outClick(e) { 31 if (this.$refs.mySelBox&&!this.$refs.mySelBox.contains(e.target)) { 32 this.isactive = false; 33 } 34 } 35 } 36 }; 37 </script> View Code

Vue封装下拉框组件时,为实现点击下拉框之外的部分收起下拉框,因此为document绑定原生事件addEventlistener("click“,fun);

 

问题发现:

  在切换页面之后(当前下拉组件会被自动销毁),但绑定的事件还未被摧毁。

 

vue文档说明:

document的监听事件确切来说是独立于vue项目之外的,如果你不销毁会一直存在。

参考:

https://segmentfault.com/q/1010000016613680

ttps://segmentfault.com/q/1010000016141322/a-1020000016609969

转载于:https://www.cnblogs.com/yandeli/p/10840106.html

总结

以上是如意编程网为你收集整理的Vue封装下拉框组件时,为document绑定原生事件addEventlistener(click“),切换页面之后事件还未被摧毁...的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。