Event Bus

지금 내가 구현하고자 하는 코드는 아래  두가지 컴포넌트  가 존재하는데

 

첫번째는  리스트  이고

 

두번째는  입력창  이다.

 

두번째 입력창에서 Data를 Insert 한 후에 popup 창이 사라지면서

첫번째 화면에서는  새롭게 Data를 loading  해야 한다.

 

근데 서로 다른 컴포넌트에서 구현한 메소드이기 때문에 고민이 있었다.

 

 Insert 를 해준 후에   리스트를 가지고 오는 Method 를 호출  하는 방법이 최선이기 때문에.

 

이벤트 버스를 이용해서  형제 요소가 가지고 있는 메소드를 호출하는 방법  을 찾았다.

 

---

 

1 ) main.js

Vue.prototype.$EventBus = new Vue()

 

위에 코드를 main.js 에 추가 해준다.

 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import common from '@/assets/js/common.js'

Vue.config.productionTip = false
Vue.use(common)
Vue.prototype.$EventBus = new Vue()

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

---

 

2 ) Button Click

<div class="_popup_btnbox"><button class="_popup_btn" @click="dataInsert()"> 등 록 </button></div>

 

버튼을 클릭하면 dataInsert() 함수가 호출이 된다.

 

이 함수는 해당 컴포넌트의 method 이다.

---

 

3 ) 해당 컴포넌트에서 형제 요소의 method 호출 방법

 dataInsert () {
      const params = new URLSearchParams()
      var channel = new Array(0)

      if (this.checkAll === true) {
        channel.push('채널')
        channel.push('카페')
        channel.push('커뮤니티')
      } else {
        if (this.check1 === true) { channel.push('블로그') }
        if (this.check2 === true) { channel.push('카페') }
        if (this.check3 === true) { channel.push('커뮤니티') }
      }

      params.append('phrase', this.phrase)
      params.append('channel', channel.join(','))

      axios.post('/dataInsert', params)
        .then((result) => {
          alert(result.data.message)
          this.$close_popup('.pop-layer')
          this.$EventBus.$emit('push-msg', result.data.message)
        })
    }

 

 

dataInsert() 함수는 위에처럼 구성이 되있는데 

 

this.$EventBus.$emit('push-msg', result.data.message)

 

이 코드에서  형제 요소의 Method를 호출  한다.

---

 

4 ) 호출 하는 쪽 ( .$emit ) vs 호출 당하는 쪽 ( .$on )

 

---

😏 이벤트 버스를 사용해서 호출 성공 😏

---

 

참고사이트

 

webruden.tistory.com/109

 

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

jsdev.kr/t/vue-js-event-bus/2926