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

Question

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

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

我可能只是懒惰，只需在父级完成一切(即在检索到的数组上使用v-for，并直接在父级构造元素和输入的列表，而根本不使用子组件)，但我理解这并不是真正的vuejs方式。

我不太熟悉子组件，但我认为如果只是静态数据，我可以在子组件中声明道具，然后从父组件中填充它。但是，我需要做的是从父组件中填充子组件，但也允许从子组件中进行更改。

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

谢谢

Answer 1

您可以在子组件上使用输入。模式如下(，编辑，，对于字符串数组或每个对象数组都有一个string属性的相同模式，如下所示)：

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://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components