Vue コンポーネント通信でバスを使用する方法

この記事では主に、Vue コンポーネント通信における Bus の具体的な使用法を紹介し、参考として提供します。

コンポーネント通信については、皆さんよくご存知だと思いますので、詳しくは説明しません。コンポーネント通信に詳しくない方は、ここに進んでください。

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

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

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

Vue の公式ドキュメントには次のような定義があります: 非親子コンポーネントの通信には次のようにほとんど内容がありません:

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

$dispatch と $broadcast をアップグレードする最も簡単な方法は、コンポーネントがコンポーネント ツリー内のどのレイヤーにあるかに関係なく、イベント センターを使用してコンポーネントが自由に通信できるようにすることです。 Vue インスタンスはイベント ディスパッチ インターフェイスを実装しているため、空の Vue インスタンスをインスタンス化することでこれを実現できます。
この集中イベントミドルウェアは Bus です。私はバスをグローバルに定義することに慣れています:

app.js

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

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

イベントを配布するコンポーネント

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

コンポーネントの監視

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

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

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

上記は私がまとめたものであり、将来的には誰にとっても役立つことを願っています。 。

関連記事:

Vueでイベント応答型プログレスバーコンポーネントを実装する方法

JSで2つの変数値の交換メソッドを実装する方法

Vueでカスタム命令を実装するには？

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