溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關解決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
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
}, 關于解決this調用無效的問題就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
