vue组件通信

最近在刷面试题，看到vue时感觉自己像没学过一样，这下又重新学习了一遍vue。其实我之前跟着B站黑马学习过，但黑马那个视频过于基础，vue讲了一点就直接接上vue+elementUi的电商管理系统，让你成了一个cv。尽管我是靠黑马自学的，是pink粉。但我个人建议学vue还是要尚硅谷。以下文章是基于尚硅谷视频中组件间通信所提炼的文章，大佬请绕过！！！
废话不多说，进入正题。
组件间通信无非就几种，分别为父->子(A-B,B-C,B-D)，子->父，兄弟组件间通信(C-D)，以及跨组件通信。(A-C,A-D)

前提准备: 使用脚手架生成项目，创建四个组件根组件App.vue、根组件的子组件School.vue、根组件的子组件Student.vue、Student子组件 Zhangsan.vue
根组件代码:

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>
<script>
	import Student from './components/Student'
	import School from './components/School'
	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>
<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student代码

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>
<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
	}
</script>
<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>
<script>
	export default {
		name:'School',
		data() {
			return {
				name:'青花大学',
				address:'北京',
			}
		},
	}
</script>
<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

第一种通信:父->子  这是最简单的基本都知道就是用  props 。(从App.vue传个值给School.vue)
直接在App.vue中找到子组件,即	<School/>，直接在	<School/>身上写值即<School :message="message"  />  message在data中定义，我这里写的  ' 明天全校放假'  子组件使用props接收。第一种完毕

第二种通信:子->父:
①在App.vue中定义个方法，通过传给子组件函数，子组件调用然后传值。
App.vue

这个方法需要props接收，下面是另一种方法。

②子组件传父组件:绑定自定义事件(v-on或者@)+$emit传
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

③子组件传父组件:通过ref+$emit传递

<Student ref="receview4"/>
......
mounted(){
   this.$refs.demo.$on('receview4',事件回调)
}

其本质是改变了一下绑定自定义事件方法， 通过this.$refs.receview4拿到Student组件的实例对象，写在mounted中，保证App挂载完毕。通过this.$refs.receview4.$on('receview4',事件回调)绑定，Student与方法二一样，通过$emit传递。
这个方法看起来好像更麻烦了，但是他灵活性强，比如可以隔5秒后绑定事件、

第三种通信:爷->父->子，就是App.vue传给Zhangsan.vue。可类似于一整条链传播。这个与第一种类似，传递方式爷->父->子，逐层传递。使用props接收数据

App.vue

Student组件

Zhangsan组件

这样就从爷爷传到孙子，但是是一层一层的传递。

兄弟间传递
①借助父组件传值，先将要传的东西通过School组件传给App.vue 然后通过App.vue传给Student。

最最最最重要的来了！！！！！！
全局事件总线（GlobalEventBus）
一种组件间通信的方式，适用于任意组件间通信
安装全局事件总线：
在main.js中配

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

提供数据：```this.$bus.$emit('xxxx',数据)```

获取数据

提供数据

还有一种可以组件间任意通信，那就是消息订阅与发布。

其实大家知道vue的双向绑定原理其中一部分是 消息订阅与发布设计模式，在这里我介绍一种消息订阅与发布实现组件间通信
准备工作:安装pubsub库：npm i pubsub-js
引入: import pubsub from 'pubsub-js'
A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

B组件想发出数据，则在B组件中发布消息。

pubsub.publish('xxx',数据)

即:
School发布消息：

Student订阅消息:

注意:回调函数第二个参数才是数据

记住所有事件绑定后最好在beforeDestroy钩子中使用 this.$off('事件名')解绑
对于发布订阅则在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

以上是我对组件间传递的理解。还有vuex部分没有加上，以后会加。目前打了5600多个字，都是手打的，请各位支持下萌新，打字不容易。
此外，如有错误之处，请在评论指出，我会立即修改，以免误人子弟。
谢谢大家!!!