父组件异步获取数据时,通过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)
})
}
}
}