Vue3 ne prend pas en charge eventBus

$on, $offEt les $onceméthodes d'instance sont supprimées. Ces trois interfaces d'événement ne sont plus implémentées sur l'instance (le cœur est l'encapsulation des fonctions de déclenchement d'événement et d'écoute d'événement).

Syntaxe 2.x

Dans 2.x, les instances Vue peuvent utiliser des API d'événement ( $on, $offet $once) pour forcer une logique de code de traitement supplémentaire. Ceci est utilisé pour créer une fonction d'écoute pour créer un écouteur d'événement global utilisé dans toute l'application:

// eventHub.js

const eventHub = new Vue()

export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'

export default {
    
    
  mounted() {
    
    
    // adding eventHub listener
    eventHub.$on('custom-event', () => {
    
    
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    
    
    // removing eventHub listener
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'

export default {
    
    
  methods: {
    
    
    callGlobalCustomEvent() {
    
    
      eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
    }
  }
}

Mise à jour 3.x

Vue3 complètement retiré de l'instance $on, $offet des $onceméthodes. $emitIl fait toujours partie de l'API existante car il est utilisé pour déclencher des événements qui sont attachés de manière déclarative par le composant parent.

Bibliothèque tierce

Vue3 ne prend pas en charge eventBus, donc l'approche officielle recommandée consiste à utiliser des bibliothèques tierces:

mitaine
minuscule émetteur