Vue3父子组件数据同步方法

在 Vue 3 中，当子组件需要修改父组件传递的数据副本并同步更新时，可以通过以下步骤实现：

方法 1：使用 v-model 和计算属性（实时同步）

父组件：

vue

子组件：

vue

方法 2：使用副本和侦听器（实时同步）

父组件同上。

子组件：

vue

方法 3：手动触发更新（如提交按钮）

父组件：

vue

子组件：

vue

关键点说明：

1. 副本创建：子组件通过 ref 或 reactive 创建数据的副本，避免直接修改 Props。

2. 数据同步：

   • 实时同步：通过 watch 监听副本变化并触发事件 (emit)，同时监听 Props 更新副本。

   • 手动同步：在用户操作（如点击按钮）时提交修改。

3. 双向绑定：利用 v-model 语法糖简化父子通信，自动处理 Prop 和事件。

4. 更新策略：根据场景选择是否实时同步或手动同步，避免循环更新或数据不一致。

注意事项：

• 深拷贝：如果传递的是对象/数组，需使用深拷贝（如 JSON.parse(JSON.stringify(props.data))）避免引用问题。

• 性能：频繁的 watch 可能影响性能，复杂场景可考虑防抖或优化监听逻辑。

• 数据一致性：父组件更新后，若需子组件副本同步，务必监听 Prop 变化并更新副本。