VUE-组件间通信（三）全局事件总线

一、作用：任意组件间通信

二、实现

1、创建全局事件总线

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

2、学生组件

触发事件

<template>
    <div class="studentInfo">
        <h2>
            学生姓名: {{ name }}
        </h2>
        <button @click="sendStudentNameToSchool">
            把学生名字给学校组件
        </button>
    </div>
</template>
<script>
export default{
    name:'StudentInfo',
    data(){
        return {
            name:"张三",
        }
    },
    methods:{
        sendStudentNameToSchool(){
            //触发事件
            this.$bus.$emit('studentToSchool',this.name)
        }

    }
}
</script>

3、学校组件

监听事件

<template>
    <div class="schoolInfo">
        <h2>
            学校名称: {{ name }}
        </h2>
    </div>
</template>
<script>
export default{
    name:'SchoolInfo',
    data(){
        return {
            name:"大学",
        }
    },
    mounted(){
        //监听事件
        this.$bus.$on("studentToSchool",(data)=>{
            console.log('我是school组件，收到了学生传来的名字',data);
        })
    }
}
</script>

$on：监听事件，当某个自定义事件被触发时，通过on方法注册的回调函数将被执行。

4、效果

VUE-组件间通信（三）全局事件总线-LMLPHP

补充知识：

总线（Bus）是计算机各种功能部件之间传送信息的公共通信干线，它是由导线组成的传输线束，按照计算机所传输的信息种类，计算机的总线可以划分为数据总线、地址总线和控制总线，分别用来传输数据、数据地址和控制信号。

In_life 在生活

VUE-组件间通信（三）全局事件总线