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

Posted 2023-02-23

【中文标题】VueJs - 使用输入字段创建子组件的正确方法是啥

【英文标题】：VueJs - What's The Correct Way to Create a Child Component With Input FieldsVueJs - 使用输入字段创建子组件的正确方法是什么

【发布时间】：2020-12-13 12:28:03

【问题描述】：

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

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

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

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

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

谢谢

【参考方案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

【讨论】：

如果你在<the-child-component>上绑定:value和@input，你不妨使用v-model，即<the-child-component v-model="someString"/>

谢谢，@Phil。已编辑。

你的子组件现在不需要value 属性了吗？

@danh 我认为这不适用于我的用例。在父级中，我想渲染一组子组件，所以我认为我不能按照您描述的方式使用 v-model 。您能否提供一个使用子组件数组的示例？为了简单起见，您可以假设它只是一个具有单个字符串属性的组件数组，如果这样更容易演示的话。

@Steviebob - 与子组件数组相同的想法。见编辑。