vue全局组件通信

🎉🎉全局组件通信

📌 $bus

main.js挂载:

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

A—>B组件通信：例：B触发A组件中的事件
A:

  //监听getSome事件
  mounted() {
       this.$bus.$on('getSome',(data)=>{
            console.log('A组件接收到的数据',data);
       })
   },
    //解绑getSome事件
  beforeDestroy() {
       this.$bus.$off('getSome');
    },

B：

  this.$bus.$emit('getSome','我是B组件，向A组件发送点数据');

📌 $on

任意组件监听全局事件
A.vue

//beforeMount==>页面data数据已初始化完成，未挂载到页面上
beforeMount() {
	this.globalEventBind();
},

methods:{
 	//全局事件绑定-->upData
    globalEventBind() {
      //解绑事件
      this.$root.$off("upData");
      this.$root.$on("upData", (data) => {
  			console.log(data);
      });
    },
}

//任意位置触发A组件中绑定的 upData事件

 this.$root.$emit("upData", {
        name: 'wg',
        sex: 'man',
      });