vue组件通信---非父子组件（bus）/任意组件间的通信（pubsub）

方式一：bus中央总线

利用总线方式可以平级组件进行通信

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。

第一步：我们先来创建中央事件总线，在src/assets/下创建一个bus.js,内容如下

import Vue from 'vue'

export default new Vue();

eventBus.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

        bus.$on('事件名称',function(msg) {
           // 回调函数
        })

$emit:实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

         bus.$emit('事件名称', 传参)

第二步：创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

firstChild.vue

<template>
    <div class="firstChild">
        <h2>子1</h2>
        <button @click="sendMsg">向兄弟2中传值</button>
    </div>
</template>
<script>
import bus from './bus';//引入中央总线Vue实例
export default {
    data() {
        return {
            msg: '向兄弟2中传值'
        }
    },
    methods: {
        sendMsg() {
            /** 
             * $emit()触发事件并传值
            */
            bus.$emit('userDefindEvent', this.msg)
        }
    }
}
</script>

我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数
$emit:实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

第三步：我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

secondChild.vue

<template>
    <div class="secondChild">
        <h2>子2</h2>
        <p>从firstChild接收的字符串参数：{{msg}}</p>
    </div>
</template>
<script>
import bus from './bus';
export default {
    data() {
        return {
            msg: '默认值'
        }
    },
    mounted() {
        let _this = this 
        //定义监听事件
        bus.$on('userDefindEvent',function(msg) {
            _this.msg = msg
        })
    }
}
</script>

我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数
PS:
mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

第四步：创建一个parent父组件，在父组件中，注册这两个组件，并添加这两个组件的标签

parent.vue

<template>
    <div class="parent">
        <h1>中央总线通信</h1>
        <first-child></first-child>
        <second-child></second-child>
    </div>
</template>
<script>
import firstChild from './firstChild';
import secondChild from './secondChild'
export default {
    data() {
        return {

        }
    },
    components: {
        firstChild,secondChild
    }
}
</script>

总结：

• 创建一个事件总线，例如demo中的bus.js，用它作为通信桥梁
• 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
• 在需要接收的组件生命周期mounted中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

eventBus原理是什么？为什么可以实现组件间的状态共享？它是什么模式？发布者订阅者分别是做什么的？vue的eventbus如何实现？

答案eventBus是一个典型的发布-订阅模式，当状态改变时候，改变方通过eventBus发布状态改变事件，关心这个状态的组件可以通过订阅该事件来获知最新的状态，这样就实现组件通信，即组件间的状态共享。

Vue项目中可以通过简单地实例化一个Vue对象来实现一个eventBus：const eventBus = new Vue();然后使用实例提供的方$on()法订阅，使用$emit()方法实现发布。另外可以通过$off()解绑事件。 

方式二：消息订阅与发布(PubSubJS 库)

pubsub的优点：组件之间的通信没有任何位置的限制

首先安装pubsub-js库

    npm install pubsub-js --sava

pubsub有两个方法：

    PubSub.publish('发布的消息名','提供给订阅者的参数')             //发布消息  ==>触发事件 比如点击事件

举例：PubSub.publish('infomation_1',data)

    PubSub.subscribe('发布的消息名',事件的监听函数)                //订阅消息   ==>绑定事件监听 获取消息

举例：PubSub.subscribe('infomation_1',function(msg,data){

    })

案例：

父组件parent.vue

<template>
    <div class="parent">
        <h1>消息订阅与发布PubSub</h1>
        <first-child></first-child>
        <second-child></second-child>
    </div>
</template>
<script>
import firstChild from './firstChild'
import secondChild from './secondChild'
export default {
    data() {
        return {

        }
    },
    components: {
        firstChild,secondChild
    }
}
</script>

子组件firstChild.vue ---发布消息

<template>
    <div class="firshChild">
        <h2>子1</h2>
        <button @click="sendMsg">向secondChild中传值</button>
    </div>
</template>
<script>
// 引入pubsub-js插件
import PubSub from 'pubsub-js'
export default {
    data() {
        return {
            msg: 'muzidigbig'
        }
    },
    methods: {
        sendMsg() {
            PubSub.publish('userEvent',this.msg); //发布消息
        }
    }
}
</script>

子组件secondChild.vue ---订阅消息

<template>
    <div class="secondChild">
        <h2>子2</h2>
        <p>firshChild传过来的数据：{{msgg}}</p>
    </div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
    data() {
        return {
            msgg: ''
        }
    },
    mounted() {
        // 订阅消息
        PubSub.subscribe('userEvent',(name,data) => {
            this.msgg = data
        })
    }
}
</script>

 注意
1) 优点: 此方式可实现任意关系组件间通信(数据)

方式三：Vue.observable

// utils.js 文件
import Vue from 'vue'
// 创建响应式对象
export const state = Vue.observable({
  count: 1
})
 
export const mutations = Vue.observable({
  increase() {
    state.count++
  }
})

// 在 vue 文件中使用
<template>
  <div id="app">
    <button @click="increaseCount">+</button>
    {{ num }}
  </div>
</template>
 
<script>
import { state, mutations } from '@/utils/index'
export default {
  name: 'App',
  computed: {
    num() {
      return state.count
    }
  },
  methods: {
    increaseCount: mutations.increase
  }
}
</script>