Vue2.0 이벤트 브로드캐스트 및 수신(관찰자 모드)

이 글에서는 주로 Vue2.0 이벤트(관찰자 모드)의 방송 및 수신에 대해 소개하고 있으니 참고용으로 올려보겠습니다.

1.Vue1.0 이벤트 방송 및 수신(관찰자 모드)

이것은 초기 vue1.0 구성 요소 간의 데이터 통신 방법이며 vue 공식 웹 사이트에서는 $dispatch 및 $broadcast 두 가지 방법을 제공합니다.

그러나 이 두 가지 방법은 vue2.0 이후에 폐기됩니다. vue 공식 웹사이트

공식 문서

2에서 설명하는 이유는 다음과 같습니다. (관찰자 모드)

vue2.0에서는 $emit, $on, $off를 사용하여 청취 이벤트를 각각 배포, 모니터링 및 취소할 수 있습니다. 공식에서 제공하는 가장 쉬운 업그레이드 제안은 중앙 집중식 이벤트 프로세서를 사용하는 것이며 Vue 인스턴스가 이벤트 배포 인터페이스를 구현하기 때문에 빈 vue 인스턴스가 이를 수행할 수 있다고 명시되어 있습니다.

코드를 직접 살펴보세요. 초기화 중에 전역 App.vue 파일의 데이터에 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에는 주로 js 객체에 추가 속성을 추가하는 프로토타입이 있다는 것을 아실 것입니다.

예를 들어 객체를 선언합니다

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

그런 다음 음성 메서드를 추가하는 등 객체를 확장하면 프로토타입의 유용한 기능이 유용해집니다

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

이것은 원래 함수 객체를 확장합니다

직접 호출하면

 var a=new person();

person.say()가 나타납니다. 이것의 장점은 추가 메모리가 생성되지 않으며 인스턴스화된 모든 객체가 프로토타입에서 이 메서드를 상속한다는 것입니다.

Vue는 실제로 js 클래스 라이브러리입니다. 물론 프로토타입의 마법 같은 기능을 사용하여 사용자 정의 속성을 확장할 수도 있습니다.

Vue.app을 초기화하기 전에 다음 문장을 추가하세요.

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

이 방법으로 컴포넌트 내에서 $eventHub를 직접 호출할 수 있습니다

다음은 위 메소드를 변형한 것입니다.

Publisher

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)

Receiver

르레에

4. 방송 끄기

방송을 끄려면 주로 $off(이벤트 이름)를 사용하여 듣기를 취소합니다!

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

vue {{}}가 렌더링 시 깜박임 및 해당 솔루션

js가 ModelAndView 값을 가져오는 문제에 대한 간략한 토론

Vue 페이지 로딩 깜박임 문제

위 내용은 Vue2.0 이벤트 브로드캐스트 및 수신(관찰자 모드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!