Javascript 什么'；从子表单组件传递和检索数据的最佳方式是什么？

这是我目前的方法：

Parent.vue:

// Template

<form-child :schema="schema"><form-child>

// JS

data () {
  return {
    schema: [{ // name: '', value: '', type: '' }, { //etc ... }]
  }
}

//模板
//JS
数据（）{
返回{
架构：[{//名称：“”，值：“”，类型：“”，{//etc…}]
}
}

FormChild.vue：

// Template

<div v-for="field in schema">
  <input v-if="field.type === 'text'" @change="updateValue(field.name, field.value)">
  <textarea v-if="field.type === 'textarea'" @change="updateValue(field.name, field.value)">/textarea>
</div>

// JS

props: {
  schema: Arrary
}

methods: {
  updateValue (fieldName, fieldValue) {
    this.schema.forEach(field => {
      // this makes schema update in Parent.vue
      if (field.name === fieldName) field.value = fieldValue
    })
  }
}

//模板
/text区域>
//JS
道具：{
模式：数组
}
方法：{
updateValue（字段名、字段值）{
this.schema.forEach（字段=>{
//这将在Parent.vue中更新架构
如果（field.name===fieldName）field.value=fieldValue
})
}
}

---

这是最佳方式吗？或者有更好的方法使用

emit

和

v-model

？（如果是这样的话，您能提供一个示例代码吗？

对于您在这里所做的工作，不需要将表单拆分为一个组件。只需将其作为父级的一部分，并使用

v-model

newvue({
el:“#应用程序”，
数据：{
模式：[{
键入：“文本”，
名称：“一”，
值：“1”
},
{
键入：“textarea”，
姓名:"两",，
值：“文本区域中的内容”
}
]
}
});

{{field.name}}={{field.value}
对于您在这里执行的操作，不需要将表单拆分为组件。只需将其作为父级的一部分，并使用
v-model


newvue({
el:“#应用程序”，
数据：{
模式：[{
键入：“文本”，
名称：“一”，
值：“1”
},
{
键入：“textarea”，
姓名:"两",，
值：“文本区域中的内容”
}
]
}
});

{{field.name}}={{field.value}
正确封装的子组件将与父数据结构分离。它将把
类型
和
值
作为单独的道具，再加上不透明的
id
来告诉父组件发出的是哪个值

通过根据
值
参数计算一个可设置的值，组件可以在其表单元素上使用
v-model
。
set
函数发出一个带有
id
和
newValue
的
input
事件，父函数从中获取该事件

Update：我决定我不喜欢
id
进入组件，所以我在输入处理程序中处理它：
@input=“updateField（index，$event）


newvue({
el:“#应用程序”，
数据：{
模式：[{
键入：“文本”，
名称：“一”，
值：“1”
},
{
键入：“textarea”，
姓名:"两",，
值：“文本区域中的内容”
}
]
},
方法：{
updateField（索引，newValue）{
this.schema[index].value=newValue；
}
},
组成部分：{
表格输入：{
道具：['type'，'value']，
计算：{
proxyValue：{
get（）{返回this.value；}，
设置（新值）{
此.$emit（'input'，newValue）；
}
}
}
}
}
})；

{{field.name}}={{field.value}
一个正确封装的子组件将与父数据结构分离。它将把
类型
和
值
作为单独的道具，加上一个不透明的
id
，告诉父组件发出的是哪个值

通过根据
value
参数计算一个可设置的值，组件可以在其表单元素上使用
v-model
。
set
函数发出一个
input
事件，其中包含
id
和
newValue
，父级从那里获取它

Update：我决定我不喜欢
id
进入组件，所以我在输入处理程序中处理它：
@input=“updateField（index，$event）


newvue({
el:“#应用程序”，
数据：{
模式：[{
键入：“文本”，
名称：“一”，
值：“1”
},
{
键入：“textarea”，
姓名:"两",，
值：“文本区域中的内容”
}
]
},
方法：{
updateField（索引，newValue）{
this.schema[index].value=newValue；
}
},
组成部分：{
表格输入：{
道具：['type'，'value']，
计算：{
proxyValue：{
get（）{返回this.value；}，
设置（新值）{
此.$emit（'input'，newValue）；
}
}
}
}
}
});

{{field.name}}={{field.value}
如果在开发模式下运行vue，它实际上应该在此处抛出警告。你不应该直接操纵道具。仅更改“已定义”的数据。您应该在子级上发射并在父级中收听。使用
$emit
和
$on
。这是一个很好的记录。@RoyJ我更新了这个问题。有
v-if
。@FrankProvost不会有警告，因为我正在数组/对象中变异值。正如许多用户提到的，使用
$emit
和
$on
在父母和孩子之间传递数据如果您在开发模式下运行vue，它实际上应该在此处抛出警告。你不应该直接操纵道具。仅更改“已定义”的数据。您应该在子级上发射并在父级中收听。使用
$emit
和
$on
。这是一个很好的记录。@RoyJ我更新了这个问题。有
v-if
。@FrankProvost不会有警告，因为我正在数组/对象中变异值。正如许多用户所提到的，使用
$emit
和
$on
在父母和孩子之间传递数据是一个非常好的实现。谢谢。有一个问题：为什么不想传递一个类似
：schema=“schema”
的模式？因为对于我添加到模式内对象的每个字段，我必须创建一个新的道具