let self = this //使用新變量替換this，以免this無效

//updateStudentInfoToServer是一個將本身部分?jǐn)?shù)據(jù)異步上傳的接口，接收三個參數(shù)，其中第一個是數(shù)據(jù)，第二、三個是函數(shù)，第二、三個函數(shù)使用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) //網(wǎng)絡(luò)成功的回調(diào) }).catch(error=>{ console.log(error) networkError(error) //網(wǎng)絡(luò)失敗的回調(diào) }) 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) } )

提交網(wǎng)絡(luò)數(shù)據(jù)是異步調(diào)用，所以會先返回然后才執(zhí)行成功、失敗的回調(diào)。

這種書寫方式，function的作用于決定了function的代碼塊內(nèi)使用this無法改變、獲取vue data中設(shè)置的變量

使用es6的箭頭語法可以實(shí)現(xiàn)this的隨處調(diào)用

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的語法，可能導(dǎo)致各種各樣的問題

補(bǔ)充知識：vue在全局函數(shù)中加回調(diào)，調(diào)用vue文件中的函數(shù)

全局函數(shù)可以寫一個文件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文件中

調(diào)用

this.testCallBack(this.test, ’yui0’)//使用全局函數(shù)調(diào)用vue文件中的函數(shù)，修改vue文件中的數(shù)據(jù)

this.setData(this, ’msg’)//使用全局函數(shù)修改vue文件中的數(shù)據(jù)

test函數(shù)編寫

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

以上這篇在vue中使用回調(diào)函數(shù),this調(diào)用無效的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。