Vue全局事件总线

目录

一、概念

二、如何实现全局事件总线

三、实现全局事件总线

（1）main.js

（2）接受数据组件

（3）发送数据组件

---

一、概念

Vue的全局事件总线帮助我们更好的解决了组件之间的数据传递，在未学习他之前，我们可以使用props来进行父组件将数据传递给子组件，通过一个回调函数可以实现子组件传递给父组件，可是却无法更好的实现兄弟组件等等情况的组件的数据传递。

但是全局事件总线可以帮助我们更好的解决，它可以实现任意组件之间的数据传递

二、如何实现全局事件总线

接收数据的组件：绑定自定义事件

发送数据的组件：触发接受绑定的自定义事件。

也就是说谁接受数据那么他就绑定自定义事件

三、实现全局事件总线

实现全局事件也就三步，安装全局事件总线；接受数据的绑定自定义事件；发送数据的除法事件。都是套路，模板一般都是下方所示。

（1）main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    // 配置全局事件总线
    Vue.prototype.$bus=this
  }
}).$mount('#app')

（2）接受数据组件

<template>
  <div>
    <p>我接收到的数据={{ msg }}</p>
  </div>
</template>

<script>
export default {
    name:'ReceiveData',
    data(){
        return{
            msg:''
        }
    },
    mounted(){
       this.$bus.$on('shuju',(p)=>{
          console.log("接收到的数据=",p);
          this.msg=p;
       })
    },
    beforeDestroy() {
       this.$bus.$off("shuju")       
    },
}
</script>

<style scoped>
div{
    background-color: orange;
}
</style>

（3）发送数据组件

<template>
  <div>
    <p>我是发送数据的组件</p>
    <button @click="senddata">点击传送数据</button>
  </div>
</template>

<script>
export default {
    name:'SendData',
    data(){
        return{
            ms:'我是大大怪'
        }
    },
    methods:{
        senddata(){
            this.$bus.$emit("shuju",this.ms)
        }
    }
}
</script>

<style scoped>
div{
    background-color: red;
}
</style>