vue的组件通信

第一种父子通信

1、创建子组件，在src/components/文件夹下新建一个Child.vue
2、Child.vue中创建props，然后创建一个名为message的属性

<template>
	<div>
		<h2>child子组件</h2>
		<p> {{ message }} </p>
	</div>
</template>
<script>
	export default{
		props:['message']
	}
</script>

3、在App.vue
中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

<template>
	<div id="app">
		<child message="hello"></child>
	</div>
<template>
<script>
import child from './components/Child';
export default {
	name : 'app',
	components:{
		child
	}
}
</script>

浏览器显示为

child子组件部分

hello

5.我们也可以对message进行动态绑定

<template>
	<div id="app">
		<child :message="parentMsg"></child>
	</div>
<template>
<script>
import child from './components/Child';
export default {
	name : 'app',
	components:{
		child
	},
	data(){
		return {
			parentMsg: "hello,child"
		}
	}
}
</script>

第二种子传递给父元素

<template>
 <div>
 	<h2> child子组件 </h2>
 	<p> {{message}} </p>
 	<button :chilk="sendMsgToParent">向父组件传递</button>
 </div>
</template>
<script>
	export default{
		props:["message"],
		methods:{
			sendMsgToParent:function(){
			}
		}
	}
</script>

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
 <div>
 	<h2> child子组件 </h2>
 	<p> {{message}} </p>
 	<button :chilk="sendMsgToParent">向父组件传递</button>
 </div>
</template>
<script>
	export default{
		props:["message"],
		methods:{
			sendMsgToParent:function(){
				this.$emit("listenToChildEvent","this message is from child")
			}
		}
	}
</script>

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
 <div id="app">
 	<child :message="parentMsg" @listenToChildEvent="showMsgFromChild"></child>
 </div>
</template>
<script>
import child from "./components/Child";
	export default{
		name: 'app',
		data(){
			return {
				parentMsg: "hello,child"	
			}
		},
		methods:{
			showMsgFromChild:function(data){
				console.log(data);
			}
		}
	}
</script>

4、浏览器显示

子父通信的小结

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

第三种事件总线平级通信

无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，兄弟通信一样需要一个介质，中央事件总线

1、先创建中央事件总线，在src/assets
/下创建一个eventBus.js

2、创建一个firstChild组件，引入这个事件总线，然后添加一个按钮，并绑定这个点击事件

3、我们再创建一个secondChild组件，引入事件总线，通过一个p标签来显示传递过来的值

4、在父组件中，注册这两个组件，并添加组件的标签

小结：

• 创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁
• 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
• 在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数
  参考原文：https://www.jianshu.com/p/2670ca096cf8