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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值