Schritte für Vue3 zur Verwendung von Mitt für die Komponentenkommunikation

Garn hinzufügen Fausthandschuh

npm install --save mitt

// Standardmäßige modulare ES-Importmethode importiere mitt von 'mitt'

const app = createApp(App)

// Die globale Instanz von vue3.x sollte auf config.globalProperties gemountet werden app.config.globalProperties.$EventBus = new mitt()

Fausthandschuh aus 'Fausthandschuh' importieren
exportiere standardmäßig neuen Handschuh()

importiere EventBus aus „/common/EventBus.js“

/*
 * App.vue
 */
// Dies ist im Setup nicht vorhanden. Sie müssen getCurrentInstance verwenden, um die Vue-Instanz zu erhalten. import { getCurrentInstance } von „vue“.
importiere { Mp3Player } aus '/common/Mp3Player.js'

Standard exportieren {
  aufstellen(){
    // ctx entspricht dem hier in Vue2.x
    const { ctx } = getCurrentInstance()
    
    // Hören Sie zu – wenn es eine neue Aufgabe gibt, spielen Sie den Soundeffekt ab ctx.$EventBus.on('newTask', data => {
      Mp3Player.abspielen()
    })

    // Sie können alle Aufgaben auch über *ctx.$EventBus.on('*', data => { abhören.
      console.log('EventBus kommt rein', Daten)
    })
  }
}


/*
 * Steuerung.vue
 */
// Wenn eine neue Aufgabe erkannt wird, lösen Sie ctx.$EventBus.emit('newTask', data) aus.

importieren {
    vor dem Aushängen,
    Aktuelle Instanz abrufen
  } von 'vue'

Standard exportieren {
  aufstellen(){
    const { ctx } = getCurrentInstance()

    beiVorUnmount(() => {
      // Entferne das angegebene Ereignis ctx.$EventBus.off('newTask')

      // Alle Ereignisse entfernen ctx.$EventBus.all.clear()
    })
  }
}