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)
            })
        }
    }
}

猜你喜欢

转载自blog.csdn.net/fly_wugui/article/details/80341031