Vueコンポーネント通信バスの使い方

今回は、Vue コンポーネント通信バスの使い方について説明します。 Vue コンポーネント通信バスを使用する際の 注意事項 については、次のとおりです。

$dispatch と $broadcast は vue2.0 で非推奨になりました。公式ドキュメントに記載されている説明は次のとおりです:

なぜなら、コンポーネントツリー構造に基づく

eventflow メソッドは非常に理解しにくく、コンポーネント構造が拡大するにつれてますます脆弱になるからです。このイベント メソッドは本当に良くありません。今後、開発者に多大な苦痛を与えたくありません。また、$dispatch と $broadcast では、兄弟コンポーネント間の通信の問題は解決されません。

公式に推奨される

ステータス管理ソリューションは Vuex です。ただし、プロジェクトがそれほど大きくなく、ステータス管理がそれほど複雑でない場合、Vuex を使用するのは過剰に感じられるでしょう。これは、ユーザー自身のニーズに基づくものであり、単なる提案です。

実際、この非親子コンポーネント通信に関するデモは、$dispatch と $broadcast の移行ドキュメントに隠されています。興味のある方はクリックしてご覧ください。ドキュメント内の提案は次のとおりです:

$dispatch と $broadcast をアップグレードする最も簡単な方法は、イベント ハブを使用して、コンポーネントがコンポーネント ツリー内のどこにあるかに関係なく、コンポーネントが自由に通信できるようにすることです。 Vue インスタンスはイベント ディスパッチ

インターフェイス を実装しているため、空の Vue インスタンスをインスタンス化することでこれを実現できます。 この集中イベント
ミドルウェア は Bus です。私はバスをグローバルに定義することに慣れています:

app.js

りぃ

次に、コンポーネント内で $emit、$on、$off を使用して、リスニング イベントをそれぞれ配布、監視、キャンセルできます。 イベントを配布するコンポーネント

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

モニタリングコンポーネント

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

複数のコンポーネントを監視する必要がある場合は、バスのイベント名を変更するだけです:

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

Swiper プラグインで矢印ボタンを切り替える方法

vue+swiper でサイドバー メニューを実装する方法

以上がVueコンポーネント通信バスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。