当前位置：首页 > news >正文

【Vue】学习笔记-全局事件总线

news 2025/7/23 14:46:19

全局事件总线(GlobalEventBus)

一种可以在任意组件通信的方式，本质上就是一个对象，它必须满足以下条件

所有的组件对象都必须能看见他
这个对象必须能够使用$ on $ emit $ off方法取绑定、触发和解绑事件

使用步骤

定义全局事件总线

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

使用事件总线
a.接收数据：A组件想接收数据，则在A组件中给$bus 绑定自定义事件，事件的回调留在A组件自身

export default{methods(){demo(data){...}}...mounted(){this.$bus.$on('xxx',this.demo)}
}

b.提供数据：this.$bus.$emit(''xxx,data)
3. 最好在beforeDestroy钩子中，用**$off()**去解绑当前组件所用到的事件。

src/main.js

//引入vue
import Vue from 'vue'
//引入APP.vue
import App from './App.vue'//关闭Vue的生产提示
Vue.config.productionTip=false//创建VUE
new Vue({el:'#app',render:h=> h(App),beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线},})

src/App.vue

<template><div class="app"><h1>{{msg}}</h1><School></School><Student></Student></div>
</template><script>import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student},data() {return {msg:'你好啊！'}}}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>

src/compoents/School.vue

<template><div class="school"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div>
</template><script>export default {name:'School',data() {return {name:'尚硅谷',address:'北京',}},mounted() {// console.log('School',this)this.$bus.$on('hello',(data)=>{console.log('我是School组件，收到了数据',data)})},beforeDestroy() {this.$bus.$off('hello')},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>

src/compoents/Student.vue

<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男'}},mounted() {// console.log('Student',this.x)},methods: {sendStudentName(){this.$bus.$emit('hello',this.name)}},}
</script><style  scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>