组件方法绑定全局body点击事件后无法访问组件属性的解决办法

这是前端开发里非常常见的上下文绑定问题，我来给你梳理几种靠谱的解决方案，都是日常项目里常用的：

核心原因 #

当你直接把组件方法绑定给body的点击事件时，事件触发时this的指向会变成触发事件的元素（也就是body元素本身），而不是你的组件实例，自然就访问不到组件的属性和方法了。我们要做的就是把this的指向强制绑定到组件实例上。

方案1：使用箭头函数保留上下文 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是组件实例）。记得要把事件回调函数存为组件属性，方便在组件销毁时移除事件，避免内存泄漏：

// app/components/example-component.js
export default {
  data() {
    return {
      isToggled: false
    };
  },
  mounted() {
    // 把箭头函数存为组件实例的属性
    this.bodyClickHandler = () => {
      this.isToggled = !this.isToggled; // 这里的this就是组件实例，可以正常访问属性
      this.doSomething(); // 也能调用组件方法
    };
    document.body.addEventListener('click', this.bodyClickHandler);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听
    document.body.removeEventListener('click', this.bodyClickHandler);
  },
  methods: {
    doSomething() {
      // 你的组件方法逻辑
    }
  }
};

方案2：使用bind()手动绑定this #

如果习惯用普通函数作为回调，可以用bind()方法把组件实例绑定到函数的this上，同样要保存引用方便移除：

// app/components/example-component.js
export default {
  data() {
    return {
      isToggled: false
    };
  },
  mounted() {
    this.bodyClickHandler = function() {
      this.isToggled = !this.isToggled;
      this.doSomething();
    }.bind(this); // 手动绑定this到组件实例
    document.body.addEventListener('click', this.bodyClickHandler);
  },
  beforeUnmount() {
    document.body.removeEventListener('click', this.bodyClickHandler);
  },
  methods: {
    doSomething() {
      // 你的组件方法逻辑
    }
  }
};

方案3：Vue选项式API的methods结合绑定（Vue2/Vue3兼容） #

如果你在Vue2里用选项式API，也可以直接把methods里的方法通过bind(this)绑定给事件，但同样要注意保存引用：

// app/components/example-component.js
export default {
  data() {
    return {
      isToggled: false
    };
  },
  mounted() {
    this.boundToggle = this.toggleComponent.bind(this);
    document.body.addEventListener('click', this.boundToggle);
  },
  beforeUnmount() {
    document.body.removeEventListener('click', this.boundToggle);
  },
  methods: {
    toggleComponent() {
      this.isToggled = !this.isToggled;
      // 这里可以正常访问组件的所有属性和方法
    }
  }
};

不管用哪种方案，一定要在组件销毁时移除全局事件监听，不然会导致内存泄漏，尤其是在单页应用里，组件反复挂载卸载的话问题会更明显。

内容的提问来源于stack exchange，提问作者AMS777