Vue父子组件通讯与异步问题

场景描述

在父组件中, 通过ajax调用接口,获取后台数据,然后通过props把数据传递到子组件中，实现父子组件通讯。

1.父组件

<template>
    <Child :msg="msgDetail"></Child>
    <Others></Others>
<template>
<script>
import Child from './Child.vue'
import Others from './Others.vue'
export default {
    data () {
        return {
          msgDetail: null  
        };
    },
    components: {
        Child,
        Others
    },
    created () {
        this.getMsgDetail({
            url: '/getMsgDetail',
            method: 'GET',
            cb: (res) => {
                this.msgDetail = res.data;
            }
        });
    }
}
</script>
复制代码

2.子组件

<template>
    <div>
        <p>{{title}}</p>
        <p>{{content}}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            title: '',
            content: ''
        }
    }
    props: {
        msg: {
            type: Object
        }
    },
    created () {
        this.initRender(this.msg);
    },
    method: {
        initRender (val) {
            this.title = val.title;
            this.content = val.content;
        }
    }
}
</script>
复制代码

发现问题

当接口返回数据并赋值给msgDetail成功后，child组件并没有渲染出来，为什么会这样呢？

在父组件中，我们是使用了异步回调的方式给子组件传参，导致在接口数据加载完成前子组件已经完成了渲染。

解决方案

• 监听msg对象，当msg对象有值时触发渲染

watch: {
    msg (newVal) {
        this.initRender(newVal);
    }
}
复制代码

• 父组件增加v-if=“msgDetail””判断属性，当有数据时才渲染

<template>
    <Child v-if="msgDetail" :msg="msgDetail"></Child>
    <Others></Others>
<template>
复制代码

• 为props设置默认值

props: {
    msg: {
        type: Object,
        default: () => {
            return {
                title: null,
                content: null
            }
        }
    }
}
复制代码