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