vue父组件向子组件传递异步加载的数据不显示解决方案

caixiajia

于 2018-11-02 09:48:11 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/caixiajia/article/details/83650648

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍在Vue中如何实现父组件向子组件传递数据，并在子组件中监听及动态渲染这些数据。通过具体代码示例，展示了使用props接收数据和watch监听更新的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父组件

<wxChat 
            :data="wxChatData"
            :showShade="false"
            :contactNickname= doctor.doctorName           
            :ownerAvatarUrl="ownerAvatarUrl"
            :contactAvatarUrl="contactAvatarUrl"
            :width="width">
        </wxChat>

2、子组件接收data

props: {
    data: {
       type: Array,
       required: true
    }
},

3、子组件渲染数据

<ul>
    <li v-for="(message, index) in dataArray" :key="index" >
         .....            
    </li>
</ul>

解决方案：监听父组件传来的数据，动态改变子组件中使用的变量

watch: {
     data: function(val) {
         console.log('val监听:',val)
         this.dataArray = this.dataArray.concat(this.data);
     }
}