一种组件间通信的方式,适用于任意组件间通信。
1. 安装全局事件总线:在入口文件main.js中
2.使用事件总线:
接收数据:A组件想接收数据,则在A组件中给 $bus 绑定自定义事件,事件的回调留在A组件自身。
<script>
export default {
name:'School',
mounted() {
// 绑定对应的自定义事件
// console.log('School',this)
this.$bus.$on('hello',(data)=>{
console.log('我是School组件,收到了数据',data) // 接收的一方完成之后,最好解绑某一个事件
})
},
// 解绑某事件
beforeDestroy() {
this.$bus.$off('hello') //有事件名代表解绑对应的事件,无事件名则全部解绑
},
}
</script>
最好在beforeDestroy钩子中,用 $off 去解绑当前组件所用到的事件。
回到要传的组件 student 中
<button @click="sendStudentName">把学生名给School组件</button>
<script>
export default {
name:'Student',
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
}
</script>