Vue如何在methods方法内正确访问组件实例对象

报错原因 #

你出现这个报错的核心问题是在methods中使用箭头函数定义方法：
箭头函数没有独立的this绑定，它的this会继承自定义时的外层作用域。Vue单文件组件默认运行在严格模式下，你代码里箭头函数的外层作用域this值为undefined，自然无法读取$refs属性。

Vue在初始化选项式API的methods时，只会对常规函数自动绑定this指向组件实例，箭头函数不会被自动绑定，因此无法通过this访问组件实例。

解决方法 #

直接将方法改为常规函数写法即可，这也是Vue官方推荐的methods定义规范：

methods: {
  getInput() {
    return this.$refs.input.value
  }
}

修改后调用getInput()时，this就会指向当前组件实例，可正常访问$refs、$data等实例属性。

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