Vue.js 組件 – 兄弟組件通信

Vue.js 是一個極具彈性的 JavaScript 框架，可以讓開發者快速開發出網頁應用程式。Vue.js 提供了一個簡單的方法來將網頁應用程式的各個部分分割成可重用的組件，以便開發者可以快速地將網頁應用程式的各個部分組合在一起。在 Vue.js 中，開發者可以使用兄弟組件通信來讓不同的組件之間互相溝通。

Vue.js 的兄弟組件通信可以讓開發者在不同的組件之間傳遞資料，而不需要將資料傳遞到父組件或根組件。Vue.js 的兄弟組件通信可以使用兩種方式來實現：使用事件和使用註冊/發布模式。

使用事件

使用事件是 Vue.js 中最常用的兄弟組件通信方式。它可以讓開發者將資料從一個組件傳遞到另一個組件，而不需要將資料傳遞到父組件或根組件。

要使用事件來實現兄弟組件通信，開發者需要在傳遞資料的組件中定義一個自定義事件，然後在接收資料的組件中使用 v-on 來監聽該事件，並在事件觸發時接收資料。

// 傳遞資料的組件
export default {
  methods: {
    sendData() {
      this.$emit('myEvent', 'some data');
    }
  }
}

// 接收資料的組件
export default {
  methods: {
    receiveData(data) {
      console.log(data);
    }
  },
  mounted() {
    this.$on('myEvent', this.receiveData);
  }
}

使用註冊/發布模式

使用註冊/發布模式是另一種常用的 Vue.js 兄弟組件通信方式。它可以讓開發者在不同的組件之間傳遞資料，而不需要將資料傳遞到父組件或根組件。

要使用註冊/發布模式來實現兄弟組件通信，開發者需要在傳遞資料的組件中使用 Vue.js 的 $emit 方法來發布資料，然後在接收資料的組件中使用 Vue.js 的 $on 方法來註冊該資料，並在資料發布時接收資料。

// 傳遞資料的組件
export default {
  methods: {
    sendData() {
      this.$emit('myEvent', 'some data');
    }
  }
}

// 接收資料的組件
export default {
  methods: {
    receiveData(data) {
      console.log(data);
    }
  },
  mounted() {
    this.$on('myEvent', this.receiveData);
  }
}

Vue.js 的兄弟組件通信可以讓開發者在不同的組件之間傳遞資料，而不需要將資料傳遞到父組件或根組件。使用事件和使用註冊/發布模式都是 Vue.js 中常用的兄弟組件通信方式，開發者可以根據自己的需求來選擇合適的方式來實現兄弟組件通信。