이 글에서는 주로 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(이벤트 이름)를 사용하여 듣기를 취소합니다!
위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다.
관련 기사:
js가 ModelAndView 값을 가져오는 문제에 대한 간략한 토론
위 내용은 Vue2.0 이벤트 브로드캐스트 및 수신(관찰자 모드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!