Vue.js 3 イベントバス

Question

<p>Vue 3 でイベント バスを作成するにはどうすればよいですか? </p>

---

<p>Vue 2 では、次のようになります: </p> <pre class="brush:js;toolbar:false;">export const Bus = new Vue(); </pre> <pre class="brush:js;toolbar:false;">bus.$on(...) バス.$emit(...) </pre>

---

<p>Vue 3 では、<code>Vue</code> はコンストラクターではなくなり、<code>Vue.createApp({});</code> は <code>$ なしで を返します< ;/code> object code> メソッドと <code>$emit</code> メソッド。 </p>

Answer 1

Vue.js バージョン 3 では、パブリッシャー/サブスクライバー (PubSub 概念) プログラミング パターンで記述されたサードパーティのライブラリまたは関数を使用できます。

イベント.js

リーリー

index.js

リーリー

Answer 2

公式 ドキュメント で提案されているように、サイドバーと header が含まれていると仮定すると、mitt< /code> ライブラリを使用してコンポーネント間でイベントをディスパッチできます。サイドバーを閉じる/開くボタン。サイドバー コンポーネント内の特定のプロパティを切り替える必要があります:

main.js にライブラリをインポートし、エミッタのインスタンスを作成し、それを グローバル プロパティ :

として定義します。 ＃＃＃＃＃＃インストール：＃＃＃＃＃＃ リーリー ＃＃＃＃＃＃使用法：＃＃＃＃＃＃ リーリー

ヘッダーにペイロードを含む toggle-sidebar イベントを発行します:

リーリー

サイドバーにペイロードを含むイベントを受信します: リーリー コンポジション API を使用している場合は、次のように

emitter

を使用できます: ファイル src/composables/useEmitter.js を作成します

リーリー

そこからは、

useRouter

を使用するのと同じように useEmitter を使用できます:

リーリー

組み合わせ API の使用

新しいコンポジション API の恩恵を受けて、コンポーザブル イベント バスを定義することもできます:

eventBus.js

リーリー コンポーネント A で次の操作を実行します:

リーリー

コンポーネント B:

リーリー