Vue コンポーネント通信: グローバル イベント通信に $bus を使用する
Vue 開発では、コンポーネント間の通信が一般的な問題になります。 Vue では、コンポーネント間の通信を実装するためのさまざまな方法が提供されています。シンプルで柔軟な方法の 1 つは、グローバル イベント通信に $bus を使用することです。
$bus は Vue インスタンスの拡張属性であり、中央のイベント バスとみなすことができます。 $bus を通じて、どこでもイベントを公開したり、どこでもイベントをサブスクライブしたりできます。
まず、Vue インスタンスでグローバル イベント バスを作成します。
// main.js import Vue from 'vue' Vue.prototype.$bus = new Vue()
次に、通信する必要があるコンポーネントで ## を使用できます。 #this.$busグローバル イベント バスにアクセスします。
$onメソッドを通じてイベントをサブスクライブし、
$emitメソッドを通じてイベントを公開できます。
// ComponentA.vue
// ComponentB.vue{{ message }}
this.$bus.$emitメソッドを通じて発行され、メッセージが表示されます。パラメータとして渡されます。コンポーネント B は、
this.$bus.$onメソッドを通じて同じイベントをサブスクライブし、イベントの受信後に
messageプロパティを更新します。
// ComponentB.vue beforeDestroy() { this.$bus.$off('event') }
// 组件A中发布的事件 this.$bus.$emit('A:event', 'Hello from Component A') // 组件B中订阅的事件 this.$bus.$on('A:event', (msg) => { // 处理事件 })
以上がVue コンポーネント通信: グローバル イベント通信に $bus を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。