关于Vue中this的问题,我不太理解this为啥可以直接访问到data。
来源:2-4 开发TodoList(v-model、v-for、v-on)
Raymond0913
2020-12-08 21:22:58
# 具体遇到的问题
如代码所示,我看其他提问已经知道this指向的是Vue实例。
我在代码中试了一下,this.$data.inputValue输出的值与this,_data.inputValue和this.inputValue的值是一样的。为什么可以不用写$data,就可以访问到值,我看vue实例里名字是_data,那么$data是别名吗?
这里的handleBtnClick函数可以使用箭头函数吗?如果可以使用,箭头函数没有this,在不使用如"app.$data.inputValue"这种写法的情况下如何解决。
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择【代码语言】突出显示
const app = new Vue({
el: '#app',
data: {
lists: [],
inputValue:''
},
methods: {
handleBtnClick:function(){
console.log(this.$data.inputValue);
console.log(this._data.inputValue);
console.log(this.inputValue);
app.$data.lists.push(app.$data.inputValue);
app.$data.inputValue = '';
}
}
})
1回答
同学你好,问题解答如下:
1、vue作为一个框架,它会以最方便的方式供用户使用。获取数据时,虽然写成his.$data.xxx、this._data.xxx都可以实现效果,但是二者的书写方式都不是很方便,所以vue就提供了this.xxx的形式,让我们更方便的访问数据。这是vue底层提供的方式,我们会用即可。
2、vue实例中的属性,不是都给用户使用的,很多是给vue底层使用的。比如$data和_data,$data可以被我们使用,但是_data则是给底层逻辑使用的,可以理解成不对外,所以二者不能简单的理解成别名的意思。
3、可以改成箭头函数。直接使用app.xxx即可(变量app就是vue实例):

建议methods中的方法,为了方便使用this,不要写成箭头函数。
祝学习愉快!
相似问题
回答 2
回答 1