VueJs - 使用输入字段创建子组件的正确方法是什么

Question

我正在尝试使用 vuejs 显示子组件的实例列表。 子组件具有用户将填写的输入字段。

父组件将检索数据数组以填充子组件（如果存在），但由于它们是输入字段，子组件将对值进行更改（这会在控制台中生成错误，作为子组件组件不应更改从父级传递的值）。

我可能只是懒惰，只是在父级别做所有事情（即在检索到的数组上使用 v-for 并直接在父级中构造元素和输入的列表，根本不使用子组件），但是我知道这不是真正的 vuejs 方式。

我对子组件不是很熟悉，但我认为如果它只是静态数据，我可以在子组件中声明 props，并从父组件中填充它。 但是我需要做的是从父组件填充子组件，但也允许从子组件内部进行更改。

有人可以描述实现这一目标的正确方法吗？

谢谢

Answer 1

您可以在子组件上使用输入。模式是这样的（edit 对于字符串数组或对象数组，每个都具有字符串属性，如下所示）：

data: function() {
  return {
    objects: [ { someString: '' }, { someString: '' } ]
  }
}

<the-child-component v-for="(object, i) in objects" :key="i"
  v-model="object.someString"
></the-child-component>

那么，在子组件中：

<template>
  <div>
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </div>
</template>

export default {
  name: 'the-child-component',
  props: ['value'],
}

请参阅此处的描述：https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components