Vue eventBus事件总线封装后再用的方式

Vue中经常会遇到子组件向父组件数据传递、兄弟组件之间数据共享等问题，这时候可以使用eventBus事件总线来解决。

事件总线就是一个事件中心，任何组件都可以向它注册事件或者触发事件，从而实现组件之间的通信。

① 创建eventBus

在Vue中，可以通过两种方式创建eventBus：

1.通过Vue实例创建：

// EventBus.js
import Vue from 'vue'
export default new Vue()

上面代码通过导出一个新建的Vue实例来创建eventBus。在其他组件中使用时，只需要导入该文件即可。

// ComponentA.vue
<script>
  import EventBus from '@/eventBus.js'
  export default {
    mounted() {
      // 向eventBus注册一个名为'eventA'的事件
      EventBus.$on('eventA', this.handleEventA)
    },
    methods: {
      handleEventA(data) {
        console.log(`eventA：${data}`)
      }
    }
  }
</script>

2.直接创建：

// EventBus.js
import { EventEmitter } from 'events'
export default new EventEmitter()

上面代码通过导出一个新建的EventEmitter实例来创建eventBus。在其他组件中使用时，也是导入该文件。

// ComponentB.vue
<script>
  import EventBus from '@/eventBus.js'
  export default {
    mounted() {
      // 向eventBus注册一个名为'eventB'的事件
      EventBus.on('eventB', this.handleEventB)
    },
    methods: {
      handleEventB(data) {
        console.log(`eventB：${data}`)
      }
    }
  }
</script>

② 触发事件

在Vue中，可以使用$emit方法触发事件，也可以直接调用eventBus的emit方法。

// ComponentC.vue
<template>
  <button v-on:click="emitEvent">触发事件</button>
</template>
<script>
  import EventBus from '@/eventBus.js'
  export default {
    methods: {
      emitEvent() {
        // 触发名为'eventC'的事件
        EventBus.emit('eventC', { msg: 'Hello, world!' })
      }
    }
  }
</script>

其他组件接收到该事件后，就可以根据需求执行相应的操作。

// ComponentD.vue
<script>
  import EventBus from '@/eventBus.js'
  export default {
    mounted() {
      // 向eventBus注册一个名为'eventC'的事件
      EventBus.on('eventC', this.handleEventC)
    },
    methods: {
      handleEventC(data) {
        console.log(`eventC：${data.msg}`)
      }
    }
  }
</script>

以上就是使用eventBus实现组件之间通信的完整攻略，通过创建eventBus实例和触发事件，就可以让不同组件之间实现数据的共享和传递。

示例1：父子组件之间的通信

// Parent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <Child></Child>
  </div>
</template>
<script>
  import Child from '@/components/Child.vue'
  import EventBus from '@/eventBus.js'
  export default {
    components: {
      Child
    },
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('child-event', (data) => {
        this.message = data
      })
    }
  }
</script>

// Child.vue
<template>
  <button v-on:click="sendMessage">向父组件传递数据</button>
</template>
<script>
  import EventBus from '@/eventBus.js'
  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('child-event', '这是来自子组件的数据')
      }
    }
  }
</script>

在父组件中监听子组件传递的事件，一旦接收到事件，就更新组件的数据。

示例2：兄弟组件之间的通信

// ComponentA.vue
<template>
  <button v-on:click="sendMessage">向兄弟组件传递数据</button>
</template>
<script>
  import EventBus from '@/eventBus.js'
  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('event-a', '这是来自ComponentA的数据')
      }
    }
  }
</script>

// ComponentB.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import EventBus from '@/eventBus.js'
  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('event-a', (data) => {
        this.message = data
      })
    }
  }
</script>

在ComponentA中触发事件，ComponentB监听该事件并更新自身的数据。