[GPT] Vue 的 methods 中使用了 addEventListener，如何在 addEventListener 的匿名函数参数中访问 Vue data 变量

 

在 Vue 的 methods 方法中使用 addEventListener时，你可以使用 箭头函数 来访问 Vue 实例的数据。

箭头函数不会创建自己的作用域，而是继承父级作用域的上下文。以下是一个示例：

 

html
<template>
  <button @click="attachEventListener">Click Me</button>
</template>
 <script>
export default {
  data() {
    return {
      vuedata: "Hello, World!"
    };
  },
  methods: {
    attachEventListener() {
      const button = document.querySelector("button");
      button.addEventListener("click", () => {
        console.log(this.vuedata); // 在addEventListener的匿名函数中访问Vue实例的数据
      });
    }
  }
};
</script>

 

在这个示例中，我们在 Vue 的 methods 方法中定义了一个 attachEventListener 方法。

在该方法中，我们使用 addEventListener 来给按钮绑定了一个点击事件。

在 addEventListener 的匿名函数中，我们使用箭头函数来访问 Vue 实例的数据，通过 this 关键字来获取 vue data 的值。当点击按钮时，控制台将输出"Hello, World!"。

 

Cool：图片取色工具

Link：https://www.cnblogs.com/farwish/p/17517772.html