在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 相关文章推荐
JavaScript中document对象使用详解
Jan 06 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
javascript实现商品图片放大镜
Nov 28 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python算法之图的遍历
2017/11/16 Python
wxPython实现带颜色的进度条
2019/11/19 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
生产管理的三大手法
2013/11/11 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
教师见习总结范文
2015/06/23 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Python使用永中文档转换服务
2022/05/06 Python