vue 2 は Bus.js を使用して非親子コンポーネント通信を実装します

この記事では、Bus.js を使用して vue 2 で非親子コンポーネント通信を実装する方法について共有します。必要な友達は参考にしてください。

イベントをブロードキャストおよび配布する $dispatch メソッドと $broadcast メソッドは次のとおりです。 vue2では放棄されました。 Props と $emit() は親子コンポーネントで使用できます。親コンポーネントと子コンポーネント以外の通信の実装方法は、相互に通信したい兄弟コンポーネントのうち、Busを媒体としてVueインスタンスをインスタンス化し、呼び出すことで通信とパラメータの転送を実現します。それぞれバスイベントのトリガーとモニタリング。
Bus.js は次のようになります

import Vue from 'vue'
export default new Vue()

通信する必要があるコンポーネントに Bus.js を導入します

import Bus from '../common/js/bus.js'

ボタンを追加し、クリック後にイベントを $emit します

<button @click="toBus">子组件传给兄弟组件</button>

メソッド

methods: {
    toBus () {
        Bus.$emit('on', '来自兄弟组件')
    }
  }

別のコンポーネントも Bus.js をインポートしますフック内 関数内の on イベントをリッスンする

import Bus from '../common/js/bus.js'
export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
       Bus.$on('on', (msg) => {
         this.message = msg
       })
     }
   }

関連する推奨事項:

vue 2.0 と elementUI はブレッドクラム ナビゲーション バー メソッド コードを実装する

Vue 2.5 レベル E の新機能の共有

Vue 2.5 での TypeScript の改善

以上がvue 2 は Bus.js を使用して非親子コンポーネント通信を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。