个人中心
gpt4 book ai didi

在vue中使用回调函数,this调用无效的解决

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章在vue中使用回调函数,this调用无效的解决由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

let self = this //使用新变量替换this，以免this无效 。

//updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第2、三个是函数，第2、三个函数使用function(){}形式书写 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
updateStudentInfoToServer: function (data, networkOk, networkError){
  let postData = 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( 'axios done' )
},
 
this .updateStudentInfoToServer(data, function (res){
   console.log( 'return ok' )
   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无法改变、获取vue data中设置的变量 。

使用es6的箭头语法可以实现this的随处调用 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
this .updateStudentInfoToServer( this , res=>{
   console.log( 'return ok' )
   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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
exports.install = function (Vue, option){
  Vue.prototype.setData = function (that, key){
  that[key] = '222'
  }
 
  Vue.prototype.testCallMe = function (str){
  console.log( 'test call me' + str)
  }
 
  Vue.prototype.testCallBack = function (func, param){
  func(param)
  this .testCallMe( 'tetetet' )
  }
}

main.js 。

import globalFunc from '@/components/globalFunc' 。

Vue.use(globalFunc) 。

vue文件中 。

调用 。

this.testCallBack(this.test, 'yui0')//使用全局函数调用vue文件中的函数，修改vue文件中的数据 。

this.setData(this, 'msg')//使用全局函数修改vue文件中的数据 。

test函数编写 。

?
1
2
3
test: function (str){
  this .msg = '233' + str
},

以上这篇在vue中使用回调函数,this调用无效的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/youyudexiaowangzi/article/details/80902183 。

最后此篇关于在vue中使用回调函数,this调用无效的解决的文章就讲到这里了,如果你想了解更多关于在vue中使用回调函数,this调用无效的解决的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 利用PHP判断是否是连乘数字串的方法示例
文章推荐： 为啥同样的逻辑在不同前端框架中效果不同
文章推荐： 使用Zttp简化Guzzle 调用
文章推荐： 详解php几行代码实现CSV格式文件输出
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com