Vue3 がコンポーネント通信に mitt を使用する手順

糸ミットを追加

npm インストール --save mitt

// 標準 ES モジュラーインポートメソッド import mitt from 'mitt'

const app = createApp(App)

// vue3.x のグローバルインスタンスは config.globalProperties にマウントする必要があります app.config.globalProperties.$EventBus = new mitt()

'mitt' から mitt をインポートする
デフォルトの新しい mitt() をエクスポートする

'/common/EventBus.js' から EventBus をインポートします。

/*
 * アプリ.vue
 */
// セットアップには this がないので、Vue インスタンスを取得するには getCurrentInstance を使用する必要があります。import { getCurrentInstance } from 'vue'
'/common/Mp3Player.js' から {Mp3Player } をインポートします。

エクスポートデフォルト{
  設定（）{
    // ctx は Vue2.x ではこれと同等です
    const { ctx } = getCurrentInstance()
    
    // リッスン - 新しいタスクがある場合は、サウンド効果を再生します ctx.$EventBus.on('newTask', data => {
      Mp3Player.再生()
    })

    // *ctx.$EventBus.on('*', data => { を通じてすべてのタスクをリッスンすることもできます。
      console.log('EventBus が来ました', データ)
    })
  }
}


/*
 * コントロール
 */
// 新しいタスクが検出されると、ctx.$EventBus.emit('newTask', data) をトリガーします。

輸入 {
    マウント解除前、
    現在のインスタンスを取得する
  } から 'vue'

エクスポートデフォルト{
  設定（）{
    const { ctx } = getCurrentInstance()

    マウント解除前に(() => {
      // 指定されたイベントを削除します ctx.$EventBus.off('newTask')

      // すべてのイベントを削除します ctx.$EventBus.all.clear()
    })
  }
}