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

本文主要是介绍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、效果

补充知识：

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

这篇关于VUE-组件间通信（三）全局事件总线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---