Tương tác giữa 2 component trong Vuejs

 

Chúng ta có 4 cách để truyền data giữa các component trong VueJS, đó là: Truyền data từ cha xuống con qua Props, truyền từ con lên cha thông qua Emit event, truyền giữa các component không có quan hệ thông qua Event bus và cách cuối cùng là thông qua Store của VueX (Giống như store trong Redux vậy).

Vậy để truyền 2 component riêng biệt, không phải là cha con thì chúng ta sử dụng thằng Event Bus.

Cách làm:

Thực ra thì event bus cũng chỉ là một vue component mà thôi. Nó là một component chuyên dụng mà có thể được sử dụng trong bất kỳ component nào.

const EventBus = new Vue()

Bây giờ chúng ta sẽ phải đính nó vào Vue global để có thử sử dụng nó ở mọi nơi trong ứng dụng.

const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

3. Trigger global event

Bây giờ chúng ta sẽ trigger event trong component

export default {
  name: \'my-component\',
  methods: {
    triggerMyEvent () {
      this.$bus.$emit(\'my-event\', { ... pass some event data ... })
    }
  }
}

Để đơn giản hơn thì bạn có thể viết luôn vào html templete như sau:

<div>
  <button @click="$bus.$emit(\'my-event\')">Click to trigger event</button>
</div>

4. Listen to events

Sau khi chúng ra đã trigger global event thì bây giờ chủng ta có thể lắng nghe ở bất kỳ component nào trong ứng dụng.

export default {
  name: \'my-component\',
  created () {
    this.$bus.$on(\'my-event\', ($event) => {
      console.log(\'My event has been triggered\', $event)
    })
  }
}

Nhớ ở đây là created nha, mình hay bị quên ghi thành create nên bị lỗi, kaka.

Thậm chí chúng ta có thể dử dụng như sau:

const EventBus = new Vue({
  created () {
    this.$on(\'my-event\', this.handleMyEvent)
  },
  methods: {
    handleMyEvent ($event) {
      console.log(\'My event caught in global event bus\', $event)
    }
  }
})

5. Conclude

Trên đây mình đã sơ lượt qua mục đích và cách sử dụng cơ bản về global event bus trong vue.js. Như các bạn cũng đã biết là cái gì global nó cũng tiềm ẩn nguy cơ, và global event bus cũng không phải là ngoại lệ, giá trị mà chúng ta truyền giữa các component có thể bị thay đổi và khó control. Đối với những ứng dụng lớn, khi số lượng component nhiều lên thì để quản lý state một cách hiệu quả bạn nên dùng Vuex( Vuex được cài đặt trên design pattern Flux, bạn cứ hình dùng các thư viện như Vuex hay Redux nó implement Flux pattern gần giống như cách mà các framework khác implement MVC pattern vậy). Ở bài viết sau mình sẽ giới thiệu đến các bạn về Vuex, rất cảm ơn các bạn đã đọc.

Nguồn:

techblog.vn/su-dung-global-event-bus-trong-vuejs