Vue全局数据总线代码模版加解析，贼详细

Vue全局数据总线代码模版加解析

前言

首先，全局总线并不难，理解起来也不算很乱，但需要有下面几个前置知识：

1. 🔗 Vue组件自定义事件
   上面的链接，如果你有点基础可以看这篇文章回顾下，如果没有基础推荐你去找更好的文章
2. 知道自定义事件绑在谁身上，就去找谁触发
3. 如果你知道消息订阅与发布（PubSub），这篇文章会更好理解

正文

本文的代码模版实现了如下图所示的数据传递例子：

说明：这个例子即使不使用全局数据总线，也是可以实现的。使用全局数据总线带来的优点是，有一个「工具人$bus」可以给我们做传播媒介，无论哪两个组件之间传递和接收数据都没有问题

核心思想是：在组件间传递数据之前，发起者要去找 $bus 注册一个自定义事件，接收者要去$bus触发发起者注册的事件（发起者将事件绑在$bus身上，所以接收者要去找$bus触发）

1⃣️ 先要造一个工具人「$bus」

在main.js 里面造一个$bus,也就是我们说的全局数据总线
解析：框里的this指的是Vue实例对象。将Vue实例对象对象绑定到Vue原型的$bus上，这样脚手架中所有的.vue组件的this中，都能找到$bus了

2⃣️ 在Brother1.vue中为$bus绑定一个自定义事件，并传递要发送给其他组件的值

3⃣️ 在Brother2.vue中触发$bus中的message事件，拿到Brother1.vue传递出来的值

实现效果：

代码模板：

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')

Brother1.vue

<template>
  <div>
    <button @click="sendMsg">点我传递一串Str给兄弟组件Brother2</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      str:"务必认识真理"
    }
  },
  methods:{
    sendMsg(){
      this.$bus.$emit('message', this.str)
    }
  },
}
</script>

Brother2.vue

<template>
  <div></div>
</template>

<script>
export default {
  mounted(){
    this.$bus.$on('message',(data)=>{
      console.log('我是Brother2，收到了Brother1发来的信息：',data);
    })
  }
}
</script>