vue 父元件非同步獲取資料與子元件通訊props資料不通;
阿新 • • 發佈:2018-12-09
父元件非同步獲取資料時,通過props向子元件傳遞資料時資料不通。 原因可能是父元件在非同步獲取資料時使用了箭頭函式, 例:
//父元件
export default{
data(){
return {
message:''
}
},
mounted(){
this.getdata()
},
methods:{
getdata()=>{ // 這裡使用了箭頭函式
//非同步獲取資料
axios("/getdata").then ((res)=>{
this.message = res;//將獲得值賦給this.message;
}).catch((error)=>{
console.log(error)
})
}
}
}
請求已經獲取到值但是卻沒有賦給message; 原因就是這裡是的getdata() 使用了箭頭函式導致了this.並沒有指向vue例項 ; 解決辦法 :使用非箭頭函式
//父元件
export default{
data(){
return {
message:''
}
},
mounted(){
this.getdata()
},
methods:{
getdata(){//使用非箭頭函式
//非同步獲取資料
axios("/getdata").then((res)=>{
this.message = res;//將獲得值賦給this.message;
}).catch((error)=>{
console .log(error)
})
}
}
}