了解Vue组件通信之子父通信「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」上一篇我们了解

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

今天我们来聊聊子父通信，即子组件跟父级组件通信是通过事件的方式来通信。

可以使用this.$emit('show',{})不仅触发了事件还传递了数据。

如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="app">
	<father></father>	
</div>


<script src="vue.js"></script>
<script type="text/javascript">	
	Vue.component('father',{
		template:`
		<div>
			<child @show="showfn"></child>
			<div v-if="show">成绩：88</div>
		</div>`,
		data:function(){
			return {
				show:false
			}
		},
		methods:{
			showfn:function(data){
				this.show = true;
				console.log(data);//data是在用$emit触发事件时传递的数据。
			}
		}
	});
	Vue.component('child',{
		template:'<button @click="onClick">这里是子组件</button>',
		methods:{
			onClick:function(){
				this.$emit('show',{a:1,b:2,c:3});//触发事件
			}
		}
	});
	new Vue({
		el:'#app'
	});
</script>
</body>
</html>

基本步骤如上代码

首先使用Vue.component定义两个组件，分别是父组件father和子组件child;理由有声明组件需要的一些配置项，如template、methods、data等等
我们可以看到例子中父组件包含子组件，即在父组件的template中包含了子组件child；
在子组件触发相关事件，在事件方法里使用$emit('事件名',{要传递的数据})来触发其他事件，这个使事件是在父组件中的子组件内监听，然后在父级组件调用触发该事件的对应的方法。

这样就实现里子父通信了。简单总结就是，子组件触发相关事件传递给父级组件，父级组件进行相关操作。

最后说明，其实通信方式有很多，不管是父子通信还是子父通信都有不同的方式实现，我这里讲得仅仅是其中的一种，更多其他的方式你可以细读官方的文档，里面讲的更加详细

以上就是文章的所有内容，欢迎点赞、评论和收藏，喜欢记得关注哦~