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


Posted in Javascript onAugust 11, 2020

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

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

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的随处调用

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

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函数编写

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

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

Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
prototype 学习笔记整理
Jul 17 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
vue 调用 RESTful风格接口操作
Aug 11 #Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 #Javascript
vue接口请求加密实例
Aug 11 #Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 #Javascript
You might like
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python SMTP实现发送带附件电子邮件
2018/05/22 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
django中related_name的用法说明
2020/05/20 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
经典团队口号
2014/06/06 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电