Vue.js => 이벤트 버스

소개

이벤트 버스는 직접적으로 관련이없는 구성 요소 (예 : 부모 - 자식 관계 없음) 사이에서 통신하는 유용한 방법입니다.

이것은 단지 빈 vue 인스턴스이며 $emit 이벤트를 출력하거나 $on 이벤트를 수신 $emit 데 사용할 수 있습니다.

통사론

기본 새 Vue 내보내기 ()

비고

응용 프로그램에 서로의 데이터가 필요한 많은 구성 요소가있는 경우 vuex를 사용하십시오.

eventBus

// setup an event bus, do it in a separate js file
var bus = new Vue()

// imagine a component where you require to pass on a data property
// or a computed property or a method!

Vue.component('card', {
  template: `<div class='card'>
    Name: 
      <div class='margin-5'>
          <input v-model='name'>
    </div>
    <div class='margin-5'>
      <button @click='submit'>Save</button>
    </div>
  </div>`,
  data() {
    return {
      name: null
    }
  },
  methods: {
    submit() {
      bus.$emit('name-set', this.name)
    }
  }
})

// In another component that requires the emitted data.
var data = {
  message: 'Hello Vue.js!'
}

var demo = new Vue({
  el: '#demo',
  data: data,
  created() {
    console.log(bus)
    bus.$on('name-set', (name) => {
      this.message = name
    })
  }
})

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Vue.js
이벤트 버스

수색…

소개

통사론

비고

eventBus