在vue中,可能会遇到在methods属性中书写的方法中出现回调函数的情况,如以下代码:

data(){
	return{
		gemometry: ""
	}
}
methods: {
	draw(){
		map.changeDragMode('drawPolygon', function(e){
			this.geometry = e.getCoord()
		})
	}
}

该代码主要想把函数参数中的坐标值绑定到data数据中,但是这里是不可行的,因为此时的函数内部绑定的this是该函数下的this,而不是vue中的this值,如果想完成绑定,主要有两种方法解决。

第一种是将this保存后再使用,实现的代码如下:

draw(){
	let _this = this
	map.changeDragMode('drawPolygon', function(e){
		_this.geometry = e.getCoord()
	})
}

第二种是将function转换为箭头函数,箭头函数内部的this总是指向词法作用域,是外层调用者,在这里是依旧指向的是vue对象,实现的代码如下:

draw(){
	map.changeDragMode('drawPolygon', e => {
		this.geometry = e.getCoord()
	})
}
Logo

前往低代码交流专区

更多推荐