Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス)

vuex を使用するだけでなく、vue 内の親子以外のコンポーネント間の通信もバスを介して行うことができ、この 2 つは異なるシナリオに適用できます。

バスは、小規模なプロジェクトや、少数のコンポーネントでデータが使用されるプロジェクトに適しています。多くのコンポーネント間でデータが使用される中規模および大規模のプロジェクトには適していません。 Bus は実際にはパブリッシュ/サブスクライブ モデルです。Vue のカスタム イベント メカニズムを使用して、トリガーの場所で $emit を通じてイベントをパブリッシュし、リッスンする必要があるページで $on を通じてイベントをリッスンします。

Vuex は、中規模から大規模のプロジェクトや、複数のコンポーネント間でデータを共有する状況に適しています。

コンポーネント通信バスの使用

utilsファイルの下にbus.jsを作成します。

// ユーティリティ - bus.js
'vue' から Vue をインポートします
定数バス = 新しい Vue()
デフォルトバスをエクスポート

1. 値の受け渡し

メッセージを送信

'@/utils/bus' からバスをインポートします

最初のパラメータはフラグ変数であり、2 番目のパラメータは通信値です。

us.$emit('message', 'hello');

情報の受信

'@/utils/bus' からバスをインポートします

最初のパラメータはフラグ変数であり、2 番目のパラメータの e は通信値です。

バス.$on('メッセージ', (e) => {
 コンソール.log(e)
})

2. 呼び出し方法

あるコンポーネント (A) が別のコンポーネント (B) のメソッドを呼び出す

コンポーネントBの方法

'@/utils/bus' からバスをインポートします
マウントされた（）{ 
 バス.$on('testA', this.testA) 
},
テストA() {
 console.log('コンポーネントAによって呼び出されました')
}

コンポーネント呼び出し

'@/utils/bus' からバスをインポートします
マウントされた（）{
 バス.$emit('testA')
}

Vue での bus の使用に関するこの記事はこれで終わりです。vue bus の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。