Vue封裝下拉框組件時，為document綁定原生事件addEventlistener("click“)，切換頁面之后事件還未被摧毀

<script>
export default {
  props: ["lists"],
  data() {
    return {
      isactive: false,
      actveName: "",
      selContent: "請選擇"
    };
  },
  mounted() {
    console.log("我被創建了");
    this.$nextTick(function() {
      document.addEventListener("click",this.outClick);
    });
  },
  beforeDestroy(){
      console.log("我被銷毀了");
      document.removeEventListener("click",this.outClick);
  },
  methods: {
    isShowSel() {
      this.isactive = !this.isactive;
    },
    light(name) {
      this.actveName = name;
      this.selContent = this.actveName;
      this.$emit("selectVal", this.actveName);
    },
    outClick(e) {
        if (this.$refs.mySelBox&&!this.$refs.mySelBox.contains(e.target)) {
          this.isactive = false;
        }
    }
  }
};
</script>

Vue封裝下拉框組件時，為實現點擊下拉框之外的部分收起下拉框，因此為document綁定原生事件addEventlistener("click“，fun);

 

問題發現：

　　在切換頁面之后（當前下拉組件會被自動銷毀）,但綁定的事件還未被摧毀。

 

vue文檔說明：

document的監聽事件確切來說是獨立於vue項目之外的，如果你不銷毀會一直存在。

參考：

https://segmentfault.com/q/1010000016613680

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