Vue中如何存储多个children的值并在父组件中执行一个函数

Posted 2023-02-23

【中文标题】Vue中如何存储多个children的值并在父组件中执行一个函数

【英文标题】：How to store the values of multiple children and execute a function in the parent component in Vue

【发布时间】：2021-12-21 10:02:07

【问题描述】：

我有一个名为 Messaging Tool 的组件

这些都是消息传递工具中的所有子组件。

这是它在视觉上的样子：

这 3 个通道打开了它们自己的表单，这些表单将用于通过适当的通道发送消息。 他们是那些：

单击“保存文本”复选框后，我需要以 CSV 格式导出字段。 单击此发送消息后，将出现确认模式。

我必须保存所有这些字段属性，并在父组件上执行 CSV 保存或向 API 发送消息。

我的问题是我该怎么做？如何保存子组件值？ 显然，我可以保存复选框值，因为它们位于主父组件中，但是，当执行父按钮中的复选框或按钮时，如何将所有这些属性保存在子组件中？

【参考方案1】：

在 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

【讨论】：

非常感谢佩佩。你为我节省了很多时间和精力。