Vue3父子组件数据同步方法

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

方法 1:使用 v-model 和计算属性(实时同步)

父组件

vue

复制代码
<template>
  <ChildComponent v-model="parentData" />
</template>

<script setup>
import { ref } from 'vue';
const parentData = ref(initialValue);
</script>

子组件

vue

复制代码
<template>
  <input v-model="modelValueComputed" />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

// 计算属性实现双向绑定
const modelValueComputed = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});
</script>

方法 2:使用副本和侦听器(实时同步)

父组件同上。

子组件

vue

复制代码
<template>
  <input v-model="localData" />
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

// 创建副本
const localData = ref(props.modelValue);

// 监听本地副本变化,同步到父组件
watch(localData, (newVal) => {
  emit('update:modelValue', newVal);
});

// 监听父组件数据变化,更新副本
watch(() => props.modelValue, (newVal) => {
  localData.value = newVal;
});
</script>

方法 3:手动触发更新(如提交按钮)

父组件

vue

复制代码
<template>
  <ChildComponent :data="parentData" @update="handleUpdate" />
</template>

<script setup>
import { ref } from 'vue';
const parentData = ref(initialValue);

const handleUpdate = (newVal) => {
  parentData.value = newVal;
};
</script>

子组件

vue

复制代码
<template>
  <input v-model="localData" />
  <button @click="submit">提交</button>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps(['data']);
const emit = defineEmits(['update']);

// 初始化副本
const localData = ref(props.data);

// 父组件数据变化时更新副本
watch(() => props.data, (newVal) => {
  localData.value = newVal;
});

const submit = () => {
  emit('update', localData.value);
};
</script>

关键点说明:

  1. 副本创建 :子组件通过 refreactive 创建数据的副本,避免直接修改 Props。

  2. 数据同步

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

    • 手动同步:在用户操作(如点击按钮)时提交修改。

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

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

注意事项:

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

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

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

相关推荐
web守墓人32 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L37 分钟前
CSS知识复习5
前端·css
许白掰38 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架