Vue 2.0 이벤트 의 방송 과 수신(관찰자 모드)

1.Vue 1.0 이벤트 의 방송 및 수신(관찰자 모드)
초기 vue 1.0 구성 요소 간 의 이 통신 으로 데 이 터 를 전달 하 는 방법 은 vue 홈 페이지 에서 두 가지 방법 으로$dispatch 와$broadcast 를 제시 했다.
그러나 vue 2.0 이후 이 두 가지 방법 을 버 렸 다.다음 과 같은 이 유 는 vue 홈 페이지 에서 나 온 것 이다.

공식 문서
2.Vue 2.0 이벤트 의 방송 및 수신(관찰자 모드)
vue 2.0 에 서 는$emit,$on,$off 를 사용 하여 각각 배포,감청,감청 사건 을 취소 할 수 있 습 니 다.공식 적 으로 제 시 된 가장 간단 한 업그레이드 제안 은 집중 적 인 이벤트 프로 세 서 를 사용 하 는 것 이 며,빈 vue 인 스 턴 스 를 명확 하 게 설명 하면 할 수 있 습 니 다.Vue 인 스 턴 스 가 이벤트 배포 인 터 페 이 스 를 실현 하기 때 문 입 니 다.
코드 를 직접 보 세 요.초기 화 할 때 전역 App.vue 파일 에 data 에 eventhub 라 는 빈 vue 대상 을 추가 하 십시오.

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

이렇게 하면 우 리 는 모든 구성 요소 에서 이벤트 발사 수신 방법 을 호출 할 수 있 습 니 다.그러면 구성 요 소 는 어떻게 발사 하고 수신 합 니까?정면 코드 를 보십시오:
어떤 구성 요소 에서 이벤트 실행

//  this.$root.eventHub     
//  $emit   
this.$root.eventHub.$emit('      ',          )

이상 은 하나의 구성 요소 가 하나의 사건 을 발사 한 것 입 니 다.제 가 라디오 를 보 낸 것 으로 이해 할 수 있 습 니 다.만약 다른 구성 요소 가 제 방송 을 필요 로 한다 면 제 채널 로 조정 하 십시오.이 채널 은 바로 당신 의 사건 이름 입 니 다.방송의 내용 은 바로 당신 이 전송 한 데이터 입 니 다.그러면 문제 입 니 다.다른 구성 요 소 는 어떤 방법 으로 받 습 니까?코드 보 세 요.

this.$root.eventHub.$on('      ', (     )=>{
  handle(yourData)
} )

라디오 를 들 어야 하 는 구성 요 소 는 우리 가 전역 적 으로 정의 하 는 eventHub.$on 을 통 해 받 을 수 있 습 니 다.수신 채널 은 방송의 이벤트 이름 이 고 리 셋 에는 라디오 내용 이 있 습 니 다.
3.좀 더 간결 하 게 쓴다
js 에 대해 어느 정도 알 고 있 습 니 다.js 에 prototype 이 있다 는 것 을 알 수 있 습 니 다.이것 은 주로 js 대상 에 게 추가 적 인 속성 을 증가 시 킵 니 다.
대상

var person=function(){
  this.name="  ";
}

그리고 우 리 는 이 대상 을 확장 합 니 다.예 를 들 어 말 하 는 방법 을 추가 하 는 것 입 니 다.이때 prototype 이라는 좋 은 물건 이 도움 이 되 었 습 니 다.

person.prototype.say=function(){
  alert(this.name);
}

이렇게 해서 원래 의 함수 대상 을 확장 시 켰 다.
호출 할 때 바로

 var a=new person();

person.say();샤 오 밍 이 튀 어 나 올 거 야.이렇게 하면 메모리 가 추가 로 생기 지 않 고 모든 실례 화 된 대상 이 원형 에서 이 방법 을 계승 하 는 것 이 장점 이다.
Vue 는 사실 js 라 이브 러 리 입 니 다.물론 prototype 이라는 신기 한 것 으로 사용자 정의 속성 을 확대 할 수 있 습 니 다.
Vue.app 를 초기 화하 기 전에 다음 과 같이 덧 붙 입 니 다.

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

이렇게 하면 우 리 는 구성 요소 내부 에서$eventHub 를 직접 호출 할 수 있 습 니 다.
다음은 위의 방법 을 재 개조 하 는 것 이다.
발표 자

//  this.$root.eventHub     
//  $emit   
this.$eventHub.$emit('      ',          )

수신 자

 this.$eventHub.$on('      ', (  )=>{
    handle(yourData).
  } )

4.방송 종료
라디오 를 끄 고 우 리 는 주로$off(당신 의 이벤트 이름)를 통 해 듣 기 를 취소 하면 됩 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.