main.js ファイルにマウントします
注: 中央のイベント バス実装メソッドもこの方法で実装できます。
- 新しい js ファイルを直接作成し、ファイル内に vue インスタンスを作成してエクスポートします。
- 通信する必要がある 2 つのコンポーネントにこの Bus.js を導入します。
- データを転送するコンポーネントでは、vue インスタンスのメソッド $emit を通じてイベント名と転送するデータが送信されます。(データコンポーネントの送信)
- データを渡されたコンポーネントはイベントをリッスンし、vue インスタンス メソッド $on を通じてデータを受け取ります。
この方法は、この記事のVue コンポーネント間の通信方法の概要で説明されており、他にもいくつかの通信方法があります。
この記事では主に vue のセントラル イベント バスについて説明します。選択方法は次のとおりです。vue インスタンスを直接作成し、vue のプロトタイプ (Vue.prototype) にマウントします。, これにより、任意の vue コンポーネントでメソッド呼び出しを行うことができます。この方法で実装する方が簡単で簡単だと思います。main.js ファイル内のコードは次のとおりです。
// main.js
Vue.prototype.$bus = new Vue();
対応するコンポーネントでイベントを開始してリッスンする
// 发起事件的组件 this.$bus.$on
// 在对应代码处发起事件
// fn 为发起的事件名称，会被$bus.$on监听，可以自己定义名称（发起与监听的名称要一致）
// data 为需要传递的数据，能够在$bus.$on处获取
const data = 'abc'
this.$bus.$emit('fn', data)
// 响应事件的组件 this.$bus.$emit
// 先在mounted中进行注册监听
//（注意：注册监听的组件中，在组件销毁前记得通过$off注销对中央事件中线的监听）
// fn 为监听的事件名称，会由$emit发起，可以自己定义名称（发起与监听的名称要一致）
// foo 为响应事件的具体方法
methods: {
foo(val) {
console.log(val) // abc
}
}
mounted() {
this.$bus.$on('fn', this.foo)
}
beforeDestroy() {
this.$bus.$off("fn");
},
注意事項（セントラルイベントバスは無効となります）
中央イベント バスはクロスレベル コンポーネントでよく使用されるため、イベントが開始されたにもかかわらず、リッスン イベントが応答しないという状況に友人が遭遇することがあります。
この状況の考えられる理由は、イベントを開始するコンポーネントがイベントを開始するときに、イベントをリッスンするコンポーネントがマウントされていないか、まだイベントをリッスンしていないことです。(簡単に言うと、リスニング イベント (on) はイベント (emit) が開始される前に存在する必要があります。）