vue 中如何实现父子组件数据传递

本文介绍了一种Vue.js中实现子组件向父组件传递数据的方法。通过子组件中的按钮触发事件,使用$emit发送自定义事件并将参数传递给父组件,父组件通过@event监听并接收这些参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:

   实现组件之间子组件向父组件传递数据,该如何做到呢?

上代码:

子组件:

<template>
	<div>
		<button @click="click">点击</button>
	</div>
</template>
<script>
	export default{
		methods:{
			click(){
				let  a = "123"
				let  b = "456"
				this.$emit("childClick",a,b)
			}
		}
	}
</script>

<style>
</style>

子组件模板中,只有一个button按钮,当按下这个按钮之后,触发操作,后台将通过console输出子组件向父组件传递值。$emit 绑定一个自定义事件childClick事件,当这个这个语句被执行到的时候,就会将参数 a,b传递给父组件,父组件通过@event监听并接收参数。这里的自定义事件可以任意命名,emit传递的参数 可以是多个,类型不限制。

父组件:

<template>
	<div>
		<Son @childClick="parentClick"></Son>
	</div>
</template>

<script>
	import Son  from './son.vue'
	export default{
		components:{
			Son
		},
		methods:{
			parentClick(a,b){
				console.log("a,b=>",a,b);
			}
		}
	}
</script>
<style>
</style>

父组件中, 引入子组件Son,并在模板中设置子组件, @childClick表示子组件的方法(这时要和子组件中的需要emit的方法一致)。在父组件中childClick 方法被触发时,就会调用父组件中定义的函数parentClick,并向其中传递两个参数a,b。这时,我们需要注意,子组件中emit方法中包含两个参数a,b;那么我们在父组件中,可以只获取到a,或者都获取到。但如果parentClick 中存在第三个参数c,因为子组件中只传递了两个值,所以,c是个空值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

VogtZhao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值