vue 组件间的几种通信方式

Props配置

原理：通过props配置，进行父子组件间的通信，跨父子通信需要其他组件进行过渡。

使用：

传递方在标签中添加传递内容

<Son :newName="name"/>

接收方在props配置中接收

props:['newName']     // 简单接收
props:{
    sex:String,
    age:Number
}    // 接收的同时，进行数据类型检测

适用：父子通信

全局事件总线

原理：Vue 原型对象上包含事件处理的方法，VueComponent.prototype.__ proto__ === Vue.prototype，所有组件对象都能看到 Vue 原型对象上的属性和方法。

全局事件总线：包含事件处理相关方法的对象  + 可以得到所有的组件 + 唯一。

使用：

指定事件总线对象

new Vue({
        beforeCreate () {
            // 尽量早的执行挂载全局事件总线对象的操作
            Vue.prototype.$globalEventBus = this
        },
    }).$mount('#App')

绑定自定义事件监听

this.$globalEventBus.$on(eventName, listener)

分发自定义事件

this.$globalEventBus.$emit(eventName, data)

绑定事件监听, 但只能处理一次

this.$globalEventBus.$once(eventName, listener)

解绑自定义事件监听

this.$globalEventBus.$off(eventName)

适用：兄弟通信、跨级通信。

消息订阅发布

原理：这种方式的思想与全局事件总线很相似，需要引入一个消息订阅与发布的第三方实现库: PubSubJS

订阅消息 --对应绑定事件监听、 发布消息 --分发事件、取消消息订阅 --解绑事件监听

使用：

下载第三方库

npm install -S pubsub-js

引入第三方库

import PubSub from 'pubsub-js'

订阅消息

PubSub.subscribe('msgName', functon(msgName, data){})

发布消息, 触发订阅的回调函数调用

PubSub.publish('msgName', data)

取消消息的订阅

PubSub.unsubscribe(token)