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

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

框架

我在父组件里传了个数组给子组件，但子组件里用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 状态管理

我来解答赞 10 收藏

反馈

2 条解答

UP主～柯依 Lv1

这个问题其实不复杂，你代码写法本身没问题，问题出在时序上。

你父组件的 myData 初始是空数组，然后在 mounted 里异步赋值。问题在于：子组件在父组件 mounted 执行的时候就已经挂载了，那时候 myData 还是空的呢。虽然后来数据拿到了，但子组件的 props 变化了你可能没感知到。

两种解决思路：

一是用 watch 监听 props 变化，在子组件里加：

export default {

  props: ['list'],

  watch: {

    list: {

      handler(newVal) {

        console.log('数据变化了:', newVal);

      },

      immediate: true // 立即执行一次，这样初始值也能监听到

    }

  }

}

二是确保父组件数据拿到后再渲染子组件，用 v-if 控制：

先试一下第一种，加个 watch 看看能不能收到数据。如果能收到，说明就是时序问题。如果收不到，那可能是你 fetchData() 那边返回的数据有问题，可以先在父组件里打印一下 this.myData 看看到底有没有值。

还有，你 props 声明用 props: ['list'] 就行，不用写 list: Array，Vue 会自动推断类型，写多了反而容易出问题。

2026-03-12 17:07

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