Event Bus

Vue Event-Bus

Event-Bus란

vue에서는 부모-자식 컴포넌트 간의 통신을 한다. 그러나 아무 상관이 없는 독립적인 컴포넌트 사이에서도 통신이 필요할 때가 있다. 나의 경우, 하나의 컴포넌트 안에 헤더와 콘텐츠 영역으로 나뉘어 있는데 콘텐츠 영역에서 헤더 영역에게 스크롤되었는지 알려주어야 한다. 헤더는 그 정보를 받아 헤더 배경색을 바꿀지 그대로 보여줄지 판단하는 것이다.

Store를 사용하면 안되나

store를 사용하면 편리할 것 같다. 그러나, 내 생각에 store는 한 번만 사용하는 것이 아니라, store에 저장된 정보를 여러 곳에서 사용하는 곳에 사용해야 한다고 생각한다. 그래서 이 문제는 store를 사용하면 안될 것 같았다.

Event-Bus를 사용해볼까

Event-Bus 사용법은 다음과 같다.

// index.vue(content영역)
// 스크롤되었을 경우, 이벤트버스를 이용하여 이벤트를 보낸다.
onScroll(e) {
  if (window.scrollY >= 0 && window.scrollY <= this.investHeight) {
    this.isChangedToolbar = true
    EventBus.$emit('changeColor', this.investBgColor)
  } else {
    this.isChangedToolbar = false
    EventBus.$emit('changeColor', 'none')
  }
}

// TheHeading.vue(header 영역)
created() {
  EventBus.$on('changeColor', bgColor => {
    if (bgColor !== 'none') {
      this.isChangedToolbarColor = true
    } else {
      this.isChangedToolbarColor = false
    }
  })
}

Event-Bus의 단점은

써보면 편리하다. 부모-자식 컴포넌트가 아니어도 이벤트를 호출할 수 있기 때문이다. 그러나 호출하는, 받는 부분이 너무 많으면 판단하기 쉽지 않고, 찾는 데 시간이 오래 걸린다. 5년 전에는 많이 사용되었지만 개발자에게 혼란을 줄 수 있어서 현재는 거의 사용되지 않고 state로 통합되었다.(state란 store를 말한다.) 결국엔 store다…