Javascript 结合vue道具和v-for

这是我的子组件的示例 HTML:

JavaScript（Vue）：

导出默认值{
姓名：“儿童”，
道具：['parentForm']，
数据（）{
返回{
表格：{
投入：[
{
姓名：'姓名'，
键入：“文本”
],
[...]
}
}
}

和根成分的样本 HTML:

JavaScript（Vue）：

从“/child”导入子项；
导出默认值{
名称：“根”，
组件：{child}，
数据（）{
返回{
表格：{
数据：{
名称：空，
电子邮件：空，
...
}
}
}

问题是，如何实现root+v-for的组合

示例我想这样使用子组件

<input :name"input.name" :type="input.type" v-model="parentForm.data . input.name" />

因为parentForm.data将绑定form:data:{这将是变量get from input.name}

v-model中的输出应该是根组件上的bind

form.data.name

或

form.data.email

---

谢谢您

您可以按照以下步骤使用它

---

这将把

input.name='name'

的

parentForm.data.name

绑定到

v-model

如果我理解正确，您希望从子组件更新父数据。如果是，则有两个选项

在子组件中，使用

$parent.form.data

进行绑定

或者，您可以将其作为

prop

传递给子对象中的

数据属性。在子对象中绑定此新数据属性，并在进行任何更改时发出该属性。在父对象中接收此
emit
，并分别更新父对象属性（推荐）

---

你在道具或绑定中有一个输入错误。你称它为

parentsForm

和

parentForm

这实际上是可行的。但是我不明白基本的，不是

parentForm.data[input.name]

是指数组而不是对象吗？事实上，如果你看到了基本原理，甚至数组也是一种对象，因此，当你使用关联数组时，它只是javascript中的一个对象。

<script>
  export default {
    name: "child",
    props: ['parentForm'],
    data() {
      return {
        form: {
          inputs: [
            {
              name: 'name',
              type: 'text'
          ],
          [...]
        }
      }
    }

<child :parentsForm="form"></child>

<script>
  import child from "./child";

  export default {
    name: "root",
    components: { child },
    data() {
      return {
        form: {
          data: {
            name: null,
            email: null,
            ...
          }
      }
    }

<input :name"input.name" :type="input.type" v-model="parentForm.data . input.name" />