Xin chào các bạn, hôm nay chúng ta cùng đến với phần hai của chủ đề “Giao tiếp giữa các component”. Ở trong bài trước chúng ta đã tìm hiểu về cách giao tiếp giữa component cha và con trong Vue.js, nếu các bạn chưa đọc, hãy tìm hiểu thêm ở đây:

Bài 7: Giao tiếp giữa các component (Phần 1)

Việc giao tiếp giữa các component không đơn giản chỉ là giao tiếp giữa 2 component có quan hệ cha – con với nhau. Trong trường hợp hai component con có chung cha ta có thể nhờ thằng cha làm phương tiện trao đổi dữ liệu. Việc xử lý điều đó đã khá là phức tạp. Thế các component có họ hàng từ đời ông bà, chú bác với nhau thì gần như là không thể thực hiện được. Trong trường hợp này, ta có thể sử dụng một pattern vô cùng hữu ích đối với mọi lập trình viên sử dụng Vue.js, đó chính là Event Bus.

Event Bus trong Vue.js

Ta tận dụng chính sức mạnh của Vue.js để implement pattern này, việc này hết sức đơn giản:
Ta có set up cho EventBus.js như sau:

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

Với việc sử dụng event bus, ta đã tạo ra các global event listeners cho toàn bộ ứng dụng. Nó emit ra một event nhằm giao tiếp giữa bất kỳ 2 component nào có trong ứng dụng, mình tạm gọi là Sender và Receiver.

Sender:

import EventBus from './EventBus'

export default {
  methods: {
    callGlobalCustomEvent() {
      EventBus.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
    }
  }
}

Receiver:

import EventBus from './EventBus'

export default {
  mounted() {
    // adding EventBus listener
    EventBus.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // removing EventBus listener
    EventBus.$off('custom-event')
  }
}

Sender sẽ emit ra một global event, Receiver sẽ lắng nghe đến khi event được gọi. Hãy nhớ gọi EventBus.$off trong beforeDestroy để tránh hiện tượng data leak các bạn nhé!

Hy vọng các bạn đã hiểu rõ cách giao tiếp giữa các component thông qua phần 1 và 2 của chủ đề này. Hẹn gặp lại các bạn trong các chủ đề tiếp theo.