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

最新推荐文章于 2022-03-17 18:30:07 发布

原创最新推荐文章于 2022-03-17 18:30:07 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

2 篇文章

订阅专栏

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

背景:

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

上代码:

子组件:

<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是个空值。