【vue练习】vue全局事件总线

第一步：创建全局事件总线

在main.js以下位置贴入以下代码,主要是beforeCreate 这一段

export default new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),

  beforeCreate () { //生命周期钩子，组件创建之前 
    Vue.prototype.$bus = this//往原型上放一个VM(this、当前组件的实例对象)
    },

})

第二步：创建自定义事件发送数据，需要发送数据的组件中贴入以下代码

 clickEvent(){
            // 用于发送数据，参数一，changeFn自定义事件的名称，参数二，需要发送的数据
            this.$bus.$emit('changeFn',this.name)
            this.name = ''//清空数据(人质)
            this.$bus.$off('changeFn')//解绑自定义事件，解绑之后将不再触发
        }

第三步：触发自定义事件接收数据，需要接收数据的组件中贴入以下代码

 mounted(){
        // 用于接收数据，$bus自定义的全局事件总线名称，$on当什么什么的时候，changeEvent触发的自定义事件
        this.$bus.$on('changeEvent',res=>{//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
            console.log(res,'收到的人质')
            this.getName = res
        })
    },

效果演示： 

点击上面按钮将黄猿老哥发送给下面组件

点击下面按钮将德雷克老哥发送给上面组件

页面全代码：（海军组件）

页面代码二：海贼组件