提到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

Logo

前往低代码交流专区

更多推荐