Fork me on GitHub

在Vue中使用EventBus实现兄弟组件通信

在开发Vue项目时,经常会有涉及许多数据交互的场景,Vue推荐我们使用Vuex去进行数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex,于是就可以使用EventBus。

  • 首先新建一个Bus.js文件用来创建我们的EventBus

    import Vue from 'vue'
    ...
    export default new Vue()
  • 接着,我们在需要的组件通过$emit触发自定义事件

    import Bus from '../components/Bus.js'
    ...
    methods: {
    emitCurrentTime () {
    Bus.$emit('currentTime', 'time')
    }
    }
  • 最后在另一个组件通过$on监听自定义事件

    import Bus from '../components/Bus.js'
    ...
    methods: {
    showCurrentTime (time) {
    console.log(time)
    }
    }
    created () {
    Bus.$on('currentTime', this.showCurrentTime)
    }
    // 这里有一个需要注意的地方,随着切换页面次数增多$on监听事件执行的次数也越来越多,这是因为$on事件是不会自动清除的,需要手动使用$off去解除监听
    beforeDestory() {
    Bus.$off('currentTime', this.showCurrentTime)
    }