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