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

最新推荐文章于 2024-04-17 16:43:58 发布
最新推荐文章于 2024-04-17 16:43:58 发布
阅读量2.4k 收藏 4
点赞数 3
文章标签： 前端 前端框架 anti-design-vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/domunweb/article/details/132584114
版权

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 值；

domunweb
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现双向绑定的原理以及响应式数据的方法
08-27
主要介绍了Vue实现双向绑定的原理以及响应式数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3.0数据响应式原理详解
10-16
主要介绍了Vue3.0数据响应式原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3-setup语法糖 - 父子组件之间的传值
热门推荐
weixin_48927323的博客
06-27 5万+
近期学习 vue3 的父子组件之间的传值，发现跟vue2的并没有太大的区别，然后发现网络上很少基于setup语法糖的教程，我这边总结一下，希望对大家有所帮助。  父组件向子组件传值的时候，子组件是通过props来接收的，然后以变量的形式将props传递到setup语法糖果中使用（defineEmits的到来！）。如下图所示： 2、子组件接收方式和使用 3、效果图 vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 $emit 而vue3使用的是emit，它们的传值一样
vue3父组件使用子组件方法
最新发布
thingir的博客
04-17 491
关于父组件调用子组件方法是比较常见的情况，vue2中使用比较简单，那么vue3 中如何使用呢？
vue3使用最新的属性defineModel实现父子组件数据响应式绑定
01-27 1290
子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？以前，为了使组件支持与v-model双向绑定，它需要（1）声明prop，（2）在打算更新prop时发出相应的有的人说需要单独在vite中配置开启，但是我用的时候就不用配置也可以使用。也许我用的最新版本？大家可以看一下自己的版本是否一致。
vue3.0 之父子组件传值
weixin_47409897的博客
04-02 3028
目录父子组件传值父传子 props方式 1：原始的 props 传值父组件子组件方式 2：使用 provide && inject父组件子组件provide 与 inject 的获取 setup 中的数据 ，传递到子组件父子通讯 案例父组件子组件 父子组件传值 父传子 props 方式 1：原始的 props 传值 父组件 <template> <div> 父组件 -- {{ num }} <RegChild :num="num" />
详解vue父子组件间传值(props)
08-30
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vite2+Vue3学习笔记（五）：自定义组件并实现父子组件响应式传参
YGいくこさん的博客
11-27 3781
新手小白Vue3学习笔记第五篇，自定义组件并使用provide/inject传递响应式更新的数据。
【Vue.js】组件间数据传递的可响应
weixin_39006917的博客
03-14 673
父组件向子组件进行数据传递，当父组件中的数据变化时，将自动传递给子组件。不允许子组件直接修改父组件中的数据。如果想实现子组件的数据变化，同步更新到父组件，有两种方式。 方式1：使用.sync修饰符+显式触发一个更新事件 方式2：将父组件中的数据包装成对象，然后在子组件中修改对象的属性 <body> <div id="app"> <comp-a> </comp-a> </div>
vue的父子组件
Pert的博客
10-09 173
动态绑定子组件 <div id="ChangeContent">   <keep-alive>   <component v-bind:is="currentTabComponent"></component>   </keep-alive> </div> data() {     return {       curren.
vue3 父子组件双向数据
qq_43575827的博客
07-03 81
众所周知，在vue中父组件传来的值是只读不可修改的，但是在vue3中父子组件使用v-model可以修改父组件传来的值。
Vue使用.sync 实现父子组件的双向绑定数据问题
10-17
主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
vue3父子组件传值.doc
02-05
vue3父子组件传值
vue3.0父子组件数据交互
06-11
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...
Vue3——setup语法糖父子之间传值
weixin_46814321的博客
03-21 584
【代码】Vue3——setup语法糖父子之间传值。
vue3响应式数据
goodutils的博客
09-12 736
每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。它是MVVM模型的框架（不熟悉框架模型的同学可以看看阮一峰大神的博客，或者点这里），实现数据的双向绑定，与其他框架相比vue非常的轻量级，另一个重要的特点就是它的响应式系统。vue响应式系统vue作为一个前端框架，近两年非常的火，虽然它的社区不像react那样繁荣，但它配套的东西都有固定的团队维护，用起来更方便。
使用vue3的时候父组件向子组件传值，子组件改变数据，父组件无响应
cz2378862893的博客
06-22 2988
vue3中reactive定义的引用类型直接赋值导致数据失去响应式
Vue3 组件：父传值
weixin_55730337的博客
08-07 330
一个组件要想接受来自父组件的参数，需要显式声明。在使用的单文件组件中，props 可以使用宏来声明。
Vue父子组件
m0_52891848的博客
02-01 1520
###Vue中父组件箱子组件传递数据的几种方法 1.基本概念 在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。 每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。 第一种方法：props & event 父组件想子组件传递props数据，
vue3父子组件之间双向数据绑定
08-12
在Vue 3中，父子组件之间的双向数据绑定是通过使用v-model指令来实现的。下面是一个示例： ```vue // 子组件 Child.vue <template> <div> <input v-model="value" type="text"> </div> </template> <script> export default { props: ['value'], emit: ['input'], } </script> ``` ```vue // 父组件 Parent.vue <template> <div> <Child v-model="message"></Child> <p>Message from child: {{ message }}</p> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child }, data() { return { message: '' } } } </script> ``` 在这个示例中，父组件`Parent.vue`通过`v-model`指令将`message`属性与子组件`Child.vue`的`value`属性进行双向绑定。子组件中的输入框通过`v-model="value"`将输入的值绑定到`value`属性上，并且当输入框的值改变时会触发一个名为`input`的事件。父组件通过监听子组件的`input`事件来更新`message`属性的值，实现了双向数据绑定。 注意：在Vue 3中，使用v-model指令时，子组件需要显式地声明接收和触发事件的属性，分别是`props: ['value']`和`emit: ['input']`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值