Vue中组件this指向问题
提到vue的组件化开发,那么肯定会存在着data(){}用来存放数据,而一般使用的时候不能直接使用,而是需要用this来指向。var app = new Vue({el:"#app",data:{},components:{aa:{template:'#aaa',data(){
·
提到vue的组件化开发,那么肯定会存在着data(){}用来存放数据,而一般使用的时候不能直接使用,而是需要用this来指向。
var app = new Vue({
el:"#app",
data:{
},
components:{
aa:{
template:'#aaa',
data(){
return{
message:'aaaaaa'
}
},
methods:{
word(){
console.log(this.message);
}
}
}
}
})
基本使用说完,那么说几种特殊情况。
当我们的方法中调用了定时器:
methods:{
word(){
console.log(this.message);
if(this.message.length>0){
setInterval(function(){
console.log(this.ccc);
},100)
}
}
}
此时可以正常输出message,但是ccc显示undefined,这是因为使用定时器时,this已经指向了window,而不是vue对象,所以自然无法找到了。解决方法很简单,提前保存this
methods:{
word(){
var that = this
console.log(this.message);
if(this.message.length>0){
setInterval(function(){
console.log(that.ccc);
},100)
}
}
}
那么以后遇到undefined的情况就不用慌张啦,冷静判断this指向,提前保存this,就可以解决这类问题了,此类情况同样适用于小程序。
如wx.getStorage,my.getStorage
更多推荐
已为社区贡献2条内容
所有评论(0)