vue事件监听函数on中的this指针域使用

当在Vue组件中定义事件监听函数on时，this指针的使用是一个经常来引起困扰的问题。在Vue中，this指向的上下文会在函数被触发时发生变化，这取决于一些因素，包括函数是否使用了箭头函数、函数是如何被触发的以及我们如何向它传参。

下面是一些在Vue事件监听函数中正确使用this指针的方法：

1. 使用箭头函数

箭头函数的一个重要特征是它不绑定this指向，而是会继承父级函数的this指向。因此，把箭头函数作为Vue的事件监听函数，可以确保在函数触发时，this指向的上下文永远是Vue组件实例。

<template>
  <button @click="sayHello">Click me!</button>
</template>

<script>
export default {
  methods: {
    sayHello: () => {
      console.log(this); // 这里的this会指向Vue组件实例
      alert("Hello!");
    },
  },
};
</script>

2. 使用bind

在事件监听函数中，可以使用bind方法显式地绑定this指向。原理是，bind方法会返回一个新函数，并将其this值设置为我们想要的值。

<template>
  <button @click="sayHello">Click me!</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log(this); // 这里的this会指向Vue组件实例
      alert("Hello!");
    }.bind(this),
  },
};
</script>

在这种情况下，我们将this的值通过bind方法传递给了我们的函数，这意味着在函数被触发时，this的值会指向Vue组件实例。

总的来说，在Vue中，正确地使用this指针需要一些细微的技巧。通过使用上面提到的方法，我们可以保证在监听函数被触发时，this指向正确。