バスの利用

Vue.js では、「バス」は通常、イベント バス (イベント バス) を指します。イベント バスは、異なるコンポーネント間の通信のパターンです。これにより、コンポーネントは相互に直接参照することなくイベントを送受信できるようになります。

Vue.js でイベント バスを使用する基本的な手順は次のとおりです。

1. イベント バスを作成する: Vue アプリケーションのメイン ファイル (通常はmain.js) または別のファイルに Vue インスタンスをイベント バスとして作成します。例えば：

// main.js 或 event-bus.js

import Vue from 'vue';

export const bus = new Vue();

2. イベントの送信: イベントを送信するコンポーネントでは、イベントはイベント バスのインスタンスを通じてトリガーされます。例えば：

// ComponentA.vue

import {
    
     bus } from './event-bus.js';

export default {
    
    
  methods: {
    
    
    sendData() {
    
    
      bus.$emit('my-event', data);
    }
  }
}

3. イベントの受信: イベントを受信するコンポーネントで、イベント バスのインスタンスをリッスンし、イベントがトリガーされたときに対応する操作を実行します。例えば：

// ComponentB.vue

import {
    
     bus } from './event-bus.js';

export default {
    
    
  created() {
    
    
    bus.$on('my-event', this.handleEvent);
  },
  methods: {
    
    
    handleEvent(data) {
    
    
      // 处理接收到的事件数据
    }
  }
}

上記の手順により、コンポーネント A はイベント バスを使用してコンポーネント B にデータを送信し、コンポーネント B はイベント バスをリッスンしてデータを受信し、対応する操作を実行できます。このようにして、コンポーネント間通信を簡単に実現できます。

イベント バスはグローバル インスタンスであるため、大規模なアプリケーションで使用する場合は、競合を避けるためにイベント名が一意であることを確認してください。