uni-app页面通讯$emit发送数据和$on接受数据之间的小Bug

使用$on接收数据的时候,this指向会出现问题。


index.vue页面发送数据

<input type="text" value="" placeholder="请输入城市名称" @confirm="searchCity"/>

methods: {
            searchCity:function(event){//@confirm命名空间不能有括号,不然报错
                //console.log(event.detail.value)
                uni.navigateBack({
                    delta:1
                })
                uni.$emit('sendCityInfo',{cityName:event.detail.value})
            }
        }

Locationchoose.vue页面接收数据

data() {
            return {
                Location:"城市选择"
            }
},
onLoad() {//$on拿到的数据,this指针会出问题
            let _this = this
            uni.$on('sendCityInfo',function(data){
                console.log(data.cityName)
             // this.Location = data.cityName //视图失效
                _this.Location = data.cityName//必须这样
            })
}

就是this指针的小bug。如果直接使用this指针赋值给Location,页面可以拿到数据,但却不会把数据渲染到视图上,也就是视图层不能及时刷新导致的,这时候必须要更改this指针(也就是let _this = this)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容