Vue3.xはコンポーネント通信にmitt.jsを使用します

npm インストール --save mitt

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
「mitt」からmittをインポートする

const app = createApp(App)
app.config.globalProperties.$mybus = mitt()

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

<テンプレート>
  <img alt="Vue ロゴ" src="./assets/logo.png" />
  <HelloWorld メッセージ="こんにちは Vue 3.0 + Vite" />
</テンプレート>

<スクリプト>
'mitt' から mitt をインポートする
'./components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  コンポーネント:
    こんにちは世界
  },
  セットアップ（小道具）{
    定数フォームアイテムMitt = mitt()
    戻る {
      フォームアイテムミット
    }
  }
}
</スクリプト>

'mitt' から mitt をインポートする

定数エミッター = mitt()

// イベントをリッスンする
エミッター.on('foo', e => console.log('foo', e) )

// すべてのイベントをリッスンする
エミッター.on('*', (type, e) => console.log(type, e) )

// イベントを発生させる
エミッター.emit('foo', { a: 'b' })

// すべてのイベントをクリアする
エミッタ.すべて.クリア()

// ハンドラー参照の操作:
関数 onFoo() {}
emittingter.on('foo', onFoo) // 聞く
emittingter.off('foo', onFoo) // 聞き取りを停止

デフォルト関数mitt(all)をエクスポートする{
 すべて = すべて || 新しい Map();

 戻る {
  全て、

  on(タイプ、ハンドラ) {
   const ハンドラ = all.get(type);
   const が追加されました = handlers && handlers.push(handler);
   （！追加）の場合{
    all.set(type, [ハンドラ]);
   }
  },

  オフ(タイプ、ハンドラ) {
   const ハンドラ = all.get(type);
   if (ハンドラ) {
    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
   }
  },

  出力(タイプ、イベント) {
   ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
   ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
  }
 };
}