全局事件总线

全局事件总线 : 任意组件间通信

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

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

3. 使用事件总线：

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

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

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

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

　　　　　　beforeDestroy() {

　　　　　　　　this.$bus.$off('hello')

　　　　　　},

 

例子 : 

　　main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

// 安装全局事件总线
Vue.prototype.$bus = new Vue()

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
})

两个兄弟组件 :

　　发送的数据的组件

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
        mounted() {
            // console.log('Student',this.x)
        },
        methods: {
　　　　　　　// 点击事件,把学生们传递到兄弟组件School
            sendStudentName(){
                this.$bus.$emit('hello',this.name)
            }
        },
    }
</script>

　　接受数据的组件

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },
        mounted() {
　　　　　　　//接受数据
            this.$bus.$on('hello',(data)=>{
                console.log('我是School组件，收到了数据',data)
            })
        },
        beforeDestroy() {
　　　　　　　// 销毁调全局事件总线
            this.$bus.$off('hello')
        },
    }
</script>