vue3做到父子级组件的双向响应式数据传输

最新推荐文章于 2025-10-27 20:37:29 发布

原创最新推荐文章于 2025-10-27 20:37:29 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #anti-design-vue #vue.js

本文详细介绍了在 Vue3 中如何通过 props、watch、toRefs、emits 和 v-model 实现父子组件之间的双向响应式数据传输。通过实例展示了从基本的单向传递到使用 v-model 的自动同步，揭示了 Vue3 中数据交互的灵活性。

部署运行你感兴趣的模型镜像

vue中要做到父子级之间的双向响应式数据传输，主要使用到 props, v-model, toRefs( props ), emits, updata:formData 等；本文章中使用 auto-import 插件省略了一些组件或 api 的引入，UI 组件为 AntD-vue 。 内容仅供参考！内容仅供参考！内容仅供参考！

1、使用 props 和 watch 的单向响应式数据

父级组件 fatherVue :

<template>
// fatherVue 
	<div>
		<child-vue :form-data = "faToSonData">
	</div>
</template>
<script lang="ts" setup>
import childVue from './childVue.vue';
const faToSonData = ref<any>{
	name: 'kujo jotaro',
	age: 18,
	isStand: 'yes'
}
</script>

子集组件 childVue :

<template>
// childVue 
	<div>
		<a-form :model="formDataSon"  :label-col="{ style: { width: '120px' } }"  ref="baseFormRef">
		  <a-form-item label="名字" name="name" >
	        <a-input v-model:value.trim="formDataSon.name" :maxlength="256" />
	      </a-form-item>
	      <a-form-item label="年龄" name="age" >
	        <a-input-number v-model:value="formDataSon.age" :min="1" :max="150" :precision="0" />
	      </a-form-item>
	      <a-form-item label="是否替身" name="isStand" >
	        <a-switch v-model:checked="formDataSon.isStand" unCheckedValue="no" checkedValue="yes" />
	      </a-form-item>
		</a-form>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import type { FormInstance } from 'ant-design-vue';

const props = defineProps<{
  formData: {
    type: any,
    required: true,
    default:{}
  }
}>();
const formDataSon = ref<any>({});
const baseFormRef = ref<FormInstance | any>();
watch(props.formData, (newVal) => {
	formDataSon.value = newVal;
}, { immediate: true });
</script>

在开始编写vue时，我使用了最基础的 :form-data = "faToSonData" 传值，在子组件中使用 watch 监听 props 中的值的变化再赋值给子组件的变量 formDataSon ，来完成一个父 —> 子组件的单向响应式数据。子组件的变量 formDataSon 绑定给了 a-form 表单组件。

2、使用 props 和 toRefs 的单向响应式数据

子集组件 childVue :

<template>
// childVue 
	<div>
		<a-form :model="formDataSon"  :label-col="{ style: { width: '120px' } }"  ref="baseFormRef">
		  <a-form-item label="名字" name="name" >
	        <a-input v-model:value.trim="formDataSon.name" :maxlength="256" />
	      </a-form-item>
	      <a-form-item label="年龄" name="age" >
	        <a-input-number v-model:value="formDataSon.age" :min="1" :max="150" :precision="0" />
	      </a-form-item>
	      <a-form-item label="是否替身" name="isStand" >
	        <a-switch v-model:checked="formDataSon.isStand" unCheckedValue="no" checkedValue="yes" />
	      </a-form-item>
		</a-form>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import type { FormInstance } from 'ant-design-vue';

const props = defineProps<{
  formData: {
    type: any,
    required: true,
    default:{}
  }
}>();
const { formData:formDataSon }: any = toRefs(props);
const baseFormRef = ref<FormInstance | any>();

</script>

父级组件代码不变，使用 toRefs 还代替 watch 对 props 中值的监听，toRefs 可以直接将 props 中的值 formData 转化为响应式数据, 并子组件创建了一个新的 ref 响应式变量 formDataSon 。

3、子组件使用 emits 向父级组件提交事件

父级组件 fatherVue :

<template>
// fatherVue 
	<div>
		<child-vue :form-data = "faToSonData" @formDataChange="sonToFaEvent">
	</div>
</template>
<script lang="ts" setup>
import childVue from './childVue.vue';
const faToSonData = ref<any>{
	name: 'kujo jotaro',
	age: 18,
	isStand: 'yes'
}
const sonToFaEvent = (params: any) => {
	faToSonData.value = params;
}
</script>

子集组件 childVue :

<template>
// childVue 
	<div>
		<a-form :model="formDataSon"  :label-col="{ style: { width: '120px' } }"  ref="baseFormRef">
		  <a-form-item label="名字" name="name" >
	        <a-input v-model:value.trim="formDataSon.name" :maxlength="256" />
	      </a-form-item>
	      <a-form-item label="年龄" name="age" >
	        <a-input-number v-model:value="formDataSon.age" :min="1" :max="150" :precision="0" />
	      </a-form-item>
	      <a-form-item label="是否替身" name="isStand" >
	        <a-switch v-model:checked="formDataSon.isStand" unCheckedValue="no" checkedValue="yes" />
	      </a-form-item>
	      <a-form-item label=" ">
	        <a-button @click="handleSubmit()">确定</a-button>
	      </a-form-item>
		</a-form>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import type { FormInstance } from 'ant-design-vue';

const props = defineProps<{
  formData: {
    type: any,
    required: true,
    default:{}
  }
}>();
const { formData:formDataSon }: any = toRefs(props);
const emits = defineEmits<{
    (event: 'formDataChange', ...args: any[]): void;
}>();
const baseFormRef = ref<FormInstance | any>();
const handleSubmit = () => {
	emits('formDataChange', formDataSon.value );
}

</script>

在 2 阶段的基础上，子组件增加了emits 向父级组件提交的事件 formDataChange，通过按钮点击手动触发，可将编辑后的响应式数据 formDataSon 传输给父级组件；
父级组件接收到子组件的数据后赋值给变量 faToSonData 。

此时可以做到父子组件的手动数据双向传输；

4、父组件使用 v-model 传值，子组件使用 emits update:formData 向父级组件提交数据更新

父级组件 fatherVue :

<template>
// fatherVue 
	<div>
		<child-vue v-model:form-data = "faToSonData">
	</div>
</template>
<script lang="ts" setup>
import childVue from './childVue.vue';
const faToSonData = ref<any>{
	name: 'kujo jotaro',
	age: 18,
	isStand: 'yes'
};
</script>

子集组件 childVue :

<template>
// childVue 
	<div>
		<a-form :model="formDataSon"  :label-col="{ style: { width: '120px' } }"  ref="baseFormRef">
		  <a-form-item label="名字" name="name" >
	        <a-input v-model:value.trim="formDataSon.name" :maxlength="256" />
	      </a-form-item>
	      <a-form-item label="年龄" name="age" >
	        <a-input-number v-model:value="formDataSon.age" :min="1" :max="150" :precision="0" />
	      </a-form-item>
	      <a-form-item label="是否替身" name="isStand" >
	        <a-switch v-model:checked="formDataSon.isStand" unCheckedValue="no" checkedValue="yes" />
	      </a-form-item>
	      <a-form-item label=" ">
	        <a-button @click="handleSubmit()">确定</a-button>
	      </a-form-item>
		</a-form>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import type { FormInstance } from 'ant-design-vue';

const props = defineProps<{
  formData: {
    type: any,
    required: true,
    default:{}
  }
}>();
const { formData:formDataSon }: any = toRefs(props);
const emits = defineEmits<{
    (event: 'update:formData', ...args: any[]): void;
}>();
const baseFormRef = ref<FormInstance | any>();

</script>

还在 2 阶段的基础上，父组件的传值改为 v-model:form-data = "faToSonData" , 子组件还是使用 toRefs 将父级传值 formData 转为响应式数据 formDataSon ；但重点是 emit 中的使用 (event: 'update:formData', ...args: any[]): void; 此时如果 a-form 表单组件内的值变化，不仅子组件的 formDataSon 会变换，父级组件的 faToSonData 值也会自动更新变化。

当然 update:formData 也可以手动触发，form 表单中的按钮点击事件时调用

const handleSubmit = () => {
	emits('update:formData', formDataSon.value );
}

父级组件不用使用 @ 获取事件，可以直接更新父组件中的变量 faToSonData 值；

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率