Vue子组件未从父组件接收道具

Posted 2023-02-23

【中文标题】Vue子组件未从父组件接收道具

【英文标题】：Vue child component not receiving prop from parent

【发布时间】：2020-10-02 16:23:39

【问题描述】：

我有一个使用 OrderTasklistBuilder 组件的订单表单组件。注意：这里有嵌套组件。层次结构如下：OrderSingle > CreateOrderForm > OrderTasklistBuilder OrderSingle 挂载时获取初始订单，然后通过子组件向下传递。

任务列表生成器组件的使用方式如下：

<order-tasklist-builder v-if="form.tasks.length" :initial-tasks="form.tasks" @taskAdded="handleTaskAdded" class="mb-2" />

这可以正常工作，但如果列表构建器中没有任何任务，组件将不会显示。这是一个问题，因为有人可能会删除所有任务。

现在，如果我删除表单任务的长度检查，即使添加新任务，任务列表构建器组件也不会显示任何任务。

<order-tasklist-builder :initial-tasks="form.tasks" @taskAdded="handleTaskAdded" class="mb-2" />

组件相当大（> 300 行），所以如果我能详细说明一些具体的内容，请告诉我。

【参考方案1】：

通过将之前在 CreateOrderForm 组件内的 mounted 函数中的逻辑移动到 created 函数来解决。