vue 执行函数this_在vue中使用回调函数,this调用无效的解决
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
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调用无效的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
vue 执行函数this_在vue中使用回调函数,this调用无效的解决相关推荐
- vue的methods属性的方法中出现回调函数,在回调函数内部获取data中的数据
在vue中,可能会遇到在methods属性中书写的方法中出现回调函数的情况,如以下代码: data(){return{gemometry: ""} } methods: {draw ...
- 理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建, ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- python自带的sum()函数和numpy库中的sum()函数的区别
在学习<机器学习实战>一书的第十章时,对 return np.sqrt(sum(np.power(vecA - vecB, 2))) 这样一条语句输出的结果老是不对,明明想要输出的是对两个 ...
- 【JavaScript】理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建, ...
- memcpy函数_如何理解c语言中的回调函数
在计算机程序设计中,回调函数,或简称回调,是指通过函数参数传递到其它代码的,某一块可执行代码的引用.这一设计允许了底层代码调用在高层定义的子程序. 这段话不是那么好理解,不同语言实现回调的方式有些许不 ...
- 什么是JavaScript中的回调函数?
This article gives a brief introduction to the concept and usage of callback functions in the JavaSc ...
- javaScript中的回调函数
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&qu ...
- C语言中的回调函数(Callback Function)
C语言中的回调函数(Callback Function) 1 定义和使用场合 回调函数是指 使用者自己定义一个函数,实现这个函数的程序内容,然后把这个函数(入口地址)作为参数传入别人(或系统)的函数中 ...
最新文章
- rocketMq-producer介绍
- SLAM: SLAM基本流程—VSLAM扫盲之旅
- HOSTNAME问题 和yum配置163源的操作 安装lsb_release,KSH,CSH
- 万圣节头像小程序源码
- C#LeetCode刷题-树
- 贪心算法两船装载问题Java_贪心算法-最优装载问题
- oracle修改redo路径,oracle修改redo log files路径
- 大学计算机基础上机实践报告,大学计算机基础上机实践报告书册.doc
- matlab2c使用c++实现matlab函数系列教程-log10函数
- SPSS学习笔记(六)线性相关及回归
- 模糊C均值聚类 C++代码
- 建站之星v2.7快速更换模版
- 推荐这几个数据大屏可视化开发工具
- 停车还能360全方位影像_揭秘360度全景泊车影像系统!
- 2021CCPC网络预选赛(重赛)
- 移动开发之三种近场通信
- ST MCSDK 初探
- Android 下载 自动安装 解析错误,studio下载APK到手机提示解析错误解决方法
- 小程序:扫二维码跳转小程序
- UIPATH 调用第三方接口(百度OCR文字识别举例)
热门文章
- C++关联容器,STL关联容器
- CRITIC法之python
- 【OpenCV 例程200篇】75. Numpy 实现图像傅里叶变换
- 【OpenCV 例程200篇】45. 图像的灰度直方图
- 【OpenCV 例程200篇】38. 图像的反色变换(图像反转)
- lingo入门(数据部分)
- linux 编译字符设备驱动错误,linux字符设备驱动框架及编写流程
- cmd imp导入dmp文件_cmd 导入oracle数据的dmp文件
- 服务器通电显示黄灯,服务器内存亮黄灯
- r语言中的或怎么表示什么不同_R经典入门 之 R语言的基本原理与概念 -- 200430