1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: false, 7 actveName: "", 8 selContent: "請(qǐng)選擇" 9 }; 10 }, 11 mounted() { 12 console.log("我被創(chuàng)建了"); 13 this.$nextTick(function() { 14 document.addEventListener("click",this.outClick); 15 }); 16 }, 17 beforeDestroy(){ 18 console.log("我被銷(xiāo)毀了"); 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封裝下拉框組件時(shí)，為實(shí)現(xiàn)點(diǎn)擊下拉框之外的部分收起下拉框，因此為document綁定原生事件addEventlistener("click“，fun);

?

問(wèn)題發(fā)現(xiàn)：

　　在切換頁(yè)面之后（當(dāng)前下拉組件會(huì)被自動(dòng)銷(xiāo)毀）,但綁定的事件還未被摧毀。

?

vue文檔說(shuō)明：

document的監(jiān)聽(tīng)事件確切來(lái)說(shuō)是獨(dú)立于vue項(xiàng)目之外的，如果你不銷(xiāo)毀會(huì)一直存在。

參考：

https://segmentfault.com/q/1010000016613680

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

轉(zhuǎn)載于:https://www.cnblogs.com/yandeli/p/10840106.html

總結(jié)

以上是生活随笔為你收集整理的Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。