在使用事件订阅$on或者使用axios请求数据时,在回调方法内想刷新数据或者调用其他本组件的方法,发现调用不了,this不能指向当前组件的vue实例,提示TypeError: this.xxx is not a function或者其他。

解决方法:使用=>

  • 示例
//修改前
globalBus.$on("test.order.new",function(data){
	//打印获取的数据
	consolo.log(data);
	//调用本组件的其他方法,例如刷新数据  **失败,this指向错误
	this.update(data);
});
//修改后
globalBus.$on("test.order.new",(data) => {
	//打印获取的数据
	consolo.log(data);
	//调用本组件的其他方法,例如刷新数据  **成功,this指向当前vue实例
	this.update(data);
});

=>和function()匿名函数不同。
function匿名函数this指向运行时实际调用该方法的对象。
=>没有自己的this,这里this在编写时已经确定。优点是不会愁于找当前组件的方法,缺点是箭头函数不能用作构造器,和 new一起用会抛出错误。

借鉴原文

Logo

前往低代码交流专区

更多推荐