Vue-组件之间的通信方式

自定义组件事件，js中的内置事件是给html元素标签使用的，而组件的自定义事件是给组件使用的

---

父组件给子组件传递数据

使用props最优，即在父组件中定义[:数据]，并在子组件中props中进行接收

子组件给父组件传递数据

其中School为子组件，定义了一个:getSchoolName的函数

其中School组件中进行声明接收

并在school组件中定义传递函数

使用组件自定义事件进行传递

第一种写法

App组件中定义给student组件绑定一个叫atguigu的事件，事件对应的处理函数名为getStudentName

在student组件中定义atguigu的触发，并传递name给父组件

第二种写法

使用ref

使用钩子函数mount

其中student组件中进行触发声明

组件自定义事件解绑

在student组件中进行定义

解绑多个自定义事件

组件自定义事件总结

组件数据传递的优选方式

全局事件总线

实现任意组件间的通信
1.在main.js文件中安装全局事件总线

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

2.使用事件总线

$类似于消息的订阅$
接收数据，A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调在A组件自身

methods(){
	demo(data){......} // 名为demo的事件回调方法
}

mounted(){
	this.$bus.$on('事件名称',this.demo)
}
或者

mounted(){
	this.$bus.$on('事件名称',（data）=>{
	//通过组件的自定义事件获取到data数据
	console.log(data)
})
}

提供数据并触发
$类似于消息的发布$

this.$bus.$emit('事件名称',数据)

3. 并在钩子函数beforeDestroy中用$off去解绑当前 组件所使用到的事件（在那个组件定义的on函数则在哪里进行销毁）

beforeDestroy(){
	this.$bus.$off('事件名称')
}

消息订阅与发布

借助第三方库进行实现
这里使用pubsub，进行安装

npm i pubsub-js

引用
谁需要收数据与发数据就在哪里进行引用

import pubsub from 'pubsub-js'

接收方进行订阅

mount(){
	this.pubId = pubsub.subscribe('消息名',(msgName,data)=>{
	// 其中msgName返回的是消息名，data返回的才是订阅的数据
		console.log('有人发布了hello消息，hello消息的回调执行了')
	})
}

发送方进行消息发布

mount(){
	sendData(data){
		pubsub.publish('消息名',data)//发布消息
	}
	
}

接收方进行消息订阅的取消

beforeDestroy(){
	//通过订阅返回的id进行订阅的取消
	pubsub.unsubscribe(this.pubId)
}