vue的methods属性的方法中出现回调函数，在回调函数内部获取data中的数据

最新推荐文章于 2023-06-23 12:06:35 发布

tjx1997

最新推荐文章于 2023-06-23 12:06:35 发布

阅读量3k

点赞数 5

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/tjx1997/article/details/120854117

版权

在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()
	})
}

关注