Vue 컴포넌트 통신 버스 사용 방법

이번에는 Vue 컴포넌트 통신 버스 사용 방법을 알려드리겠습니다. Vue 컴포넌트 통신 버스 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

$dispatch 및 $broadcast는 vue2.0에서 더 이상 사용되지 않습니다. 공식 문서에 제공된 설명은 다음과 같습니다.

컴포넌트 트리 구조를 기반으로 한 event흐름 방식은 정말 이해하기 어렵고, 컴포넌트 구조가 확장될수록 점점 더 취약해지기 때문입니다. 이 이벤트 방식은 정말 좋지 않으며, 앞으로도 개발자들에게 너무 많은 고통을 끼치고 싶지 않습니다. 그리고 $dispatch와 $broadcast는 형제 구성 요소 간의 통신 문제를 해결하지 못합니다.

공식적으로 권장되는 status 관리 솔루션은 Vuex입니다. 그러나 프로젝트가 그다지 크지 않고 상태 관리가 그다지 복잡하지 않은 경우 Vuex를 사용하면 마치 칼로 닭을 죽이는 것처럼 느껴질 것입니다. 물론 이것은 자신의 필요에 따른 것이며 단지 제안일 뿐입니다.

실제로 이 비부모-자식 구성 요소 통신에 대한 데모는 $dispatch 및 $broadcast의 마이그레이션 문서에 숨겨져 있습니다. 관심 있는 친구는 클릭하여 볼 수 있습니다. 문서의 제안 사항은 다음과 같습니다.

$dispatch 및 $broadcast를 업그레이드하는 가장 간단한 방법은 이벤트 허브를 사용하여 구성 요소가 구성 요소 트리의 어디에 있든 자유롭게 통신할 수 있도록 하는 것입니다. Vue 인스턴스는 이벤트 전달 인터페이스를 구현하므로 빈 Vue 인스턴스를 인스턴스화하여 이를 달성할 수 있습니다.
이 중앙 집중식 이벤트 미들웨어는 버스입니다. 저는 버스를 전 세계적으로 정의하는 데 익숙합니다.

app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

그런 다음 구성 요소에서 $emit, $on, $off를 사용하여 청취 이벤트를 각각 배포, 모니터링 및 취소할 수 있습니다.

이벤트를 배포하는 구성 요소

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

모니터링 구성 요소

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

여러 구성 요소를 모니터링해야 하는 경우 버스의 이벤트 이름만 변경하면 됩니다.

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 주목하세요. PHP 중국어 웹사이트!

추천 도서:

스와이퍼 플러그인으로 화살표 버튼을 전환하는 방법

vue+swiper가 사이드바 메뉴를 구현하는 방법

위 내용은 Vue 컴포넌트 통신 버스 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!