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

Question

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

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

我可以偷懒，只在父级执行所有操作(即在检索到的数组上使用 v-for 并直接在父级中构造元素和输入列表，根本不使用子组件)，但是我知道这并不是真正的 vuejs 方式。

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

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

谢谢

Answer 1

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

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