Vue中methods的this指向问题浅析

下面是详细讲解“Vue中methods的this指向问题浅析”的完整攻略。

1. 什么是Vue中的methods？

在Vue组件里，methods是用于存放方法的一个对象。它可以包含各种实例方法，例如事件监听、异步请求等等。在组件内部可以通过this关键字来调用methods里面的方法。

2. methods中的this指向问题

在Vue中，methods中的this指向往往容易被开发者所忽略或者弄混。那么这个this到底指向谁呢？下面结合两个示例说明。

2.1 示例一

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onClick() {
      console.log(this);
    }
  }
};
</script>

在这个示例中，当我们点击按钮时，将会在控制台输出该组件实例。这个this指向的就是该组件实例。

2.2 示例二

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'Hello world!'
    };
  },
  methods: {
    onClick() {
      console.log(this.text);
    }
  }
};
</script>

在这个示例中，当我们点击按钮时，将会在控制台输出当前组件的text属性值。注意到我们希望能够通过this.text来获取text属性，但是实际上会提示undefined。那是因为在这里，this指向的是点击事件对象，而不是该组件实例。

3. 综合示例 - 解决this指向问题

我们知道，可以使用箭头函数或者bind方法来解决这个问题。

3.1 使用箭头函数

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'Hello world!'
    };
  },
  methods: {
    onClick: () => {
      console.log(this.text);
    }
  }
};
</script>

在这个示例中，将onClick方法改成箭头函数的形式，这时候this就指向了该组件实例。

3.2 使用bind方法

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'Hello world!'
    };
  },
  methods: {
    onClick() {
      console.log(this.text);
    }
  }
};
</script>

在这个示例中，使用bind方法来将this绑定为该组件实例。

<button @click="onClick.bind(this)">点击我</button>

4. 小结

Vue中的methods是组件内部常用的属性之一，懂得掌握methods中this指向问题是十分重要的。在使用methods的时候，可以使用箭头函数或者bind方法来解决this指向问题。