新手学习VUE踩坑之旅---methods里面使用箭头函数要注意this

本文链接：https://blog.csdn.net/qq_39293724/article/details/85090069

VUE的methods对象里面如果函数使用箭头函数会导致this指向的不是vue实例$vm

例子：想写一个点击事件：点击输入框的“x”,即可清空文本框的内容

首先为输入框增加一个ref属性（ref=“inputUser”），然后为“x”加一个点击事件（@click=“deleteInp”）

methods中使用普通函数：

methods: {
      deleteInp : function() {
        let userValue = this.$refs.inputUser
        userValue.value = null
        userValue.focus()
      }
}

通过this.$refs.inputUser 获取到文本框对象，在设置其value属性为空即清空文本框内容

演示效果：

首先是个输入框：

输入文本，出现“x”

点击“x”清空文本框内容

一切都是非常完美的，没有一丝阻碍(～￣▽￣)～

但是如果将函数改成箭头函数的话，就会报错┭┮﹏┭┮

首先上代码：

methods: {
      deleteInp : () =>{
        let userValue = this.$refs.inputUser
        userValue.value = null
        userValue.focus()
      }
}

修改完之后运行：

就会报错，说‘inputUser’没有定义，因为使用箭头函数，此时的this就不是指向$vm。所以在使用箭头函数的时候我们要弄清楚this的指向！！！