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 变化并更新副本。

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python