将动态组件中的数据作为对象传递给父组件

Question

我创建了一个可以动态呈现一组输入的表单，因此我可以根据最终用户的需求添加和删除该组输入。

像这样：

我使用动态组件渲染“项目”输入：

<component v-for="itemRow in itemRows" :is="itemRow"></component>

父级的数据如下：

components: {
  ItemRow
},
data() {
  return {
    retailer: "",
    items: [],
    itemRows: ['ItemRow','ItemRow', 'ItemRow'],
    date: new Date(),
  }
}

以及子组件：

data() {
  return {
    description: '',
    price: 0,
    count: 0
}

所以我要做的是创建一个子数据对象，并将该对象传递给父数据集。我该如何实现？

Answer 1

Emit来自孩子的事件。

在父级中订阅该事件

<component v-for="itemRow in itemRows" :is="itemRow" @onChange="updateRow"></component>

您还需要将索引传递给孩子，以便父母知道从哪个元素接收事件

<component v-for="(itemRow, index) in itemRows" :is="itemRow" :index="index" @onChange="updateRow"></component>

这意味着您需要在子组件上定义一个prop。

请记住使用Vue.set/this.$set更新数组，否则您将无法响应数组。