Vue父子组件通信props不生效怎么办？

诸葛素红提问于 2026-03-09 03:38:23 阅读 5

框架

我在父组件里传了个数组给子组件，但子组件里用props接收后打印出来是空的，明明父组件的数据已经加载完了啊。

父组件这样传的：:list="myData"，子组件props也声明了list: Array，但就是拿不到数据，是不是哪里写错了？

<!-- 父组件 -->
<template>
  <ChildComponent :list="myData" />
</template>

<script>
export default {
  data() {
    return {
      myData: []
    }
  },
  async mounted() {
    this.myData = await fetchData(); // 假设这里返回 [1,2,3]
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ list }}</div>
</template>

<script>
export default {
  props: ['list']
}
</script>

Vue3 状态管理

我来解答赞 5 收藏

反馈

1 条解答

UX树涵 Lv1

应该是异步数据加载时机问题。父组件mounted时子组件已经渲染完了，这时候数据才到。最简单的改法是在父组件加个v-if：

<ChildComponent v-if="myData.length" :list="myData" />

或者子组件里用watch监听props变化：

watch: {

  list(newVal) {

    console.log('终于拿到了', newVal)

  }

}

2026-03-09 04:03