Vue如何存储多个子组件的值并在父组件中执行一个函数
How to store the values of multiple children and execute a function in the parent component in Vue
我有一个名为 Messaging Tool 的组件
这些是消息传递工具中的所有子组件。
视觉上是这样的：
这 3 个渠道打开自己的形式，将用于通过适当的渠道发送消息。
他们是那些：
单击 'Save text' 复选框后，我需要以 CSV 格式导出字段。
单击此发送消息后，将出现一个确认模式。
我必须保存所有这些字段属性，并在父组件上执行 CSV 保存或发送消息到 API。
我的问题是我该怎么做？如何保存子组件值？
显然，我可以保存复选框值，因为它们位于主父组件中，但是，当执行父按钮中的复选框或按钮时，如何将所有这些属性保存在子组件中？
在 Vue 2 中，您可以将 v-model 添加到所有 <child>。这样，您可以在父级中为每个子级设置一个变量，子级可以使用该变量将他们的状态同步到父级：
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
请注意，Vue 2 仅支持 v-model 单个值。如果子项需要将多个值同步到父项，您可以改为使用 .sync 修饰符：
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
如果你使用Vue 3，你可以使用多个v-model:
https://v3.vuejs.org/guide/component-custom-events.html#v-model-arguments
我有一个名为 Messaging Tool 的组件
这些是消息传递工具中的所有子组件。
视觉上是这样的：
这 3 个渠道打开自己的形式，将用于通过适当的渠道发送消息。 他们是那些：
单击 'Save text' 复选框后，我需要以 CSV 格式导出字段。 单击此发送消息后，将出现一个确认模式。
我必须保存所有这些字段属性，并在父组件上执行 CSV 保存或发送消息到 API。
我的问题是我该怎么做？如何保存子组件值？ 显然，我可以保存复选框值，因为它们位于主父组件中，但是，当执行父按钮中的复选框或按钮时，如何将所有这些属性保存在子组件中？
在 Vue 2 中，您可以将 v-model 添加到所有 <child>。这样，您可以在父级中为每个子级设置一个变量，子级可以使用该变量将他们的状态同步到父级：
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
请注意，Vue 2 仅支持 v-model 单个值。如果子项需要将多个值同步到父项，您可以改为使用 .sync 修饰符：
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
如果你使用Vue 3，你可以使用多个v-model:
https://v3.vuejs.org/guide/component-custom-events.html#v-model-arguments