Vue全局事件总线（任意组件间通信）

建议使用这种方便快捷
Vue 消息订阅与发布 (任意组件间通信)

父传子使用

使用props

全局事件总线比较适用于 子 传递 父亲

安装全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate() {
  
    Vue.prototype.$bus = this
    //挂载到VC
  }
}).$mount('#app')

beforeCreate 生命周期：无法通过VM访问data数据 和 methods 方法 生命周期的第一个函数

定义事件总线

$emit：定义
$on：接收使用

发送者：

  <button @click="snedData()">登录传递用户名</button>

 snedData() { this.$bus.$emit('send', 666, 'dpc')  }      

调用事件总线

$on：接收使用

接收者：

created() { this.getData() },

    methods:
    {
        getData() {
            this.$bus.$on('send', (data, str) =>
            {
                console.log(data, str)
            })
        }
    },    

销毁事件总线

使用完后销毁，不妨碍其他组件的使用

beforeDestroy：销毁之前

beforeDestroy() {
        this.$bus.$off('send')
    }