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