VUE3’s global event bus

VUE3’s global event bus

Review vue2

Global event bus of vue2

new Vue({
    
    
  beforeCreate() {
    
    
    Vue.prototype.$bus = this
  }
})

vue3 implementation steps

1. Install mitt

npm i mitt

2. Encapsulate the event-bus.js file

Create event-bus.js in the utils folder under src to encapsulate
event-bus.js:

import mitt from 'mitt'

export default mitt()

3. Binding events

This is accomplished by triggering emitterevents on this object.
This emitterobject is a global event bus object.

Code:

Bind bus events

• emitter.on('事件名',事件方法)

<template>
  <indexEmit />
</template>

<script>
  // 导入全局事件总线对象
  import emitter from '@/utils/event-bus.js'
  import {
      
      
    onMounted
  } from "vue";
  import indexEmit from './index_emit.vue'
  export default {
      
      
    components: {
      
      
      indexEmit
    },
    setup() {
      
      
      onMounted(() => {
      
      
        emitter.on('event1', showInfo)
      })

      function showInfo(user) {
      
      
        alert(`姓名：${ 
        user.name}，年龄：${ 
        user.age}岁`)
      }

      return {
      
      
        showInfo
      }
    }
  }
</script>

Trigger and clear bus events

• emitter.emit('事件名', 参数)Trigger a specified event on the bus
• emitter.off('事件名')Clear the specified event on the bus
• emitter.all.clear()Clear all events bound on the bus

Code:

<template>
  <button @click="triggerEvent1">触发全局事件总线上的event1事件</button>
  <button @click="clearAllEvent">解除全局事件总线上的所有绑定的时间</button>
  <button @click="clearEvent">解除全局事件总线上的event1事件</button>
</template>

<script>
  import emitter from '@/utils/event-bus.js'

  export default {
      
      
    name: 'indexEmit',
    setup() {
      
      
      function triggerEvent1() {
      
      
        emitter.emit('event1', {
      
      
          name: '张三',
          age: 18
        })
      }

      function clearAllEvent() {
      
      
        // 清除总线上绑定的所有事件
        emitter.all.clear()
      }

      function clearEvent() {
      
      
        emitter.off('event1')
      }
      return {
      
      
        triggerEvent1,
        clearAllEvent,
        clearEvent
      }
    }
  }
</script>

Involving content

vue3, mitt, emitter, global event bus