【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
知识回顾：
全局事件总线(GlobalEventBus)
- 一种组件间通信的方式，适用于任意组件间通信
安装全局事件总线：
使用事件总线：
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
- 最好在beforeDestroy钩子中，用 $off去解绑当前组件所用到的事件
School.vue
<template> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <!-- 全局事件总线(GlobalEventBus) 一种组件间通信的方式，适用于任意组件间通信 安装全局事件总线 --> </div> </template> <script> export default { name:'School', data(){ return { name:'B站大学', address:'上海' } }, mounted() { this.$bus.$on('hello',(data)=>{ console.log('我是School组件，收到了数据',data) }) }, beforeDestroy(){ this.$bus.$off('hello') } } </script> <style scoped> .demo{ background-color: orange; } </style>
Student.vue
<template> <div class="box"> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> <button @click="sendStudentName">把学生名给School组件</button> </div> </template> <script> export default { name:'Student', data(){ return{ name:'王同学', age:20 } }, methods:{ sendStudentName(){ this.$bus.$emit('hello',666) } } } </script> <style scoped> .box{ background-color: skyblue; } </style>
main.js
//该文件是整个项目的入口文件 //引入Vue import Vue from 'vue' //引入APP组件，它是所有组件的父组件 import App from './App.vue' // 关闭Vue生产提示 Vue.config.productionTip = false //将APP组件放入容器中 new Vue({ render: h => h(App), beforeCreate() { //安装全局总线 Vue.prototype.$bus = this } }).$mount('#app')
