在vue中使用回调函数,this调用无效的解决
letself=this//使用新变量替换this，以免this无效
//updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式书写
updateStudentInfoToServer:function(data,networkOk,networkError){
letpostData=this.$qs.stringify({
data:data
})
this.axios.post('/api/update/updateStudentInfo',
postData
).then(res=>{
console.log('return:')
console.log(res)
networkOk(res)//网络成功的回调
}).catch(error=>{
console.log(error)
networkError(error)//网络失败的回调
})
console.log('axiosdone')
},
this.updateStudentInfoToServer(data,function(res){
console.log('returnok')
console.log(res)
//console.log('self')
//console.log(self)//就是this
//console.log('this')
//console.log(this)//undefined
self.handleCancelEdit()
},function(error){
console.log(error)
}
)
提交网络数据是异步调用，所以会先返回然后才执行成功、失败的回调。
这种书写方式，function的作用于决定了function的代码块内使用this无法改变、获取vuedata中设置的变量
使用es6的箭头语法可以实现this的随处调用
this.updateStudentInfoToServer(this,res=>{
console.log('returnok')
console.log(res)
console.log('self')
console.log(self)
console.log('this')
console.log(this)//this和self一样
},error=>{
console.log(error)
}
)
不过某些浏览器的某些版本不支持es6的语法，可能导致各种各样的问题
补充知识：vue在全局函数中加回调，调用vue文件中的函数
全局函数可以写一个文件globalFunc.js
exports.install=function(Vue,option){
Vue.prototype.setData=function(that,key){
that[key]='222'
}
Vue.prototype.testCallMe=function(str){
console.log('testcallme'+str)
}
Vue.prototype.testCallBack=function(func,param){
func(param)
this.testCallMe('tetetet')
}
}
main.js
importglobalFuncfrom'@/components/globalFunc'
Vue.use(globalFunc)
vue文件中
调用
this.testCallBack(this.test,'yui0')//使用全局函数调用vue文件中的函数，修改vue文件中的数据
this.setData(this,'msg')//使用全局函数修改vue文件中的数据
test函数编写
test:function(str){
this.msg='233'+str
},
以上这篇在vue中使用回调函数,this调用无效的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。