道具在组件生命周期中的什么时候注入到组件中？

Question

我有一个Parent组件正在传递一个数组，我们称它为包含子项的“ bucket”到Child组件。

在我的父组件中，我有以下内容：

<child-component 
  :bucket=bucket
></childcomponent>

在我的子组件中，我有一个props部分，接受一个名为bucket的prop，并将其定义为数组，如下所示：

props: {
  bucket: Array
}

现在在我的子组件的安装部分中，我想拿这桶东西，并对其进行处理。但是，由于某种原因，它显示为空。因此，当我在子组件中执行此操作时...

mounted() {
  console.log(this.bucket.length)
}

...我得到0。当我检查Vue开发工具时，我可以看到Child组件的props部分中的bucket数组中有项目。此外，如果在控制台中将子组件设置为$ vm0，则在键入$ vm0.bucket.length时，我会得到正确的大小。

地球上有什么！？是否在子组件中调用了安装时尚未注入的道具？如果是这样，什么时候真正发生？我该如何解决？超级困惑。

谢谢！

Answer 1

正如您在评论中所说，您正在将新项目推送到bucket数组中。

不是将项目推入数组，而是应使用新项目创建一个新数组，例如：

this.bucket = [...this.bucket, newItem];

当值更改时，Vue反应性起作用，将新项目推送到数组中不会更改变量的值。

将对象或数组归于变量时，该变量的内存地址即为该变量的内存地址，因此更改其内部属性或推送新项不会更改其内存地址。

Answer 2

尝试添加指令v-if

<child-component :bucket="bucket" v-if="bucket.length"></childcomponent>

如果您这次可以在安装的组件上获得this.bucket.length，则@Stephen Thomas是正确的。