1. 程式人生 > >vue 父元件非同步獲取資料與子元件通訊props資料不通;

vue 父元件非同步獲取資料與子元件通訊props資料不通;

父元件非同步獲取資料時,通過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) })
} } }