이벤트 발송 및 수신의 구성 요소 사이의 Vue2.0

VUE의 개발에서 종종 두 개의 구성 요소 사이의 이벤트를 전달

vue1.0에서 우리는 $ 파견 및 $ 브로드 캐스트를 사용

child.vue :

this.$dispatch('eventName',this.data);

parent.vue :

event:{
    'eventName':function(data) {
        // 执行的方法
    }
}

구성 요소 트리 이해하기 정말 열심히, 그리고 구성 요소 구조의 확장 과정에서 점점 더 취약되고, 유일한 것 스트리밍 행사를 기반으로하기 때문에 그러나 vue2.0 $ 파견 및 $ 방송에서, 버려진 아들 요소간에 통신 장치. 공식에 의해 주어진 가장 쉬운 업그레이드 권장 사항은 이벤트 핸들러의 집합을 사용하는 것입니다, 또한 명확하게 뷰의 예를 구현하는 이벤트 인터페이스를 배포 할 수 있기 때문에 빈 VUE의 한 예는, 수행 할 수 있습니다 보여
vue2.0 초기화 VUE 전에 객체 eventhub 빈 VUE로 데이터에 이름을 추가

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

특정 트리거 어셈블리 내에서 통화 이벤트

this.$root.eventHub.$emit('eventName', event.target);

전화 이벤트를 다른 구성 요소에서 수신 한 후 때 구성 요소의 파괴를 제외하고 바인딩 이벤트는, 방법 오프 $를 사용

created() {
    this.$root.eventHub.$on('eventName',(target) => {
    this.functionName(target)
  });
},
method:{
    functionName(target) {
    console.log(target);
    }
}

이 문서는 재현 원숭이 2048➜ https://www.mk2048.com/blog/blog.php?id=hhbh0a2jiib

추천