Vue 컴포넌트 통신에서 버스를 사용하는 방법

이 글에서는 Vue 컴포넌트 통신을 위한 버스의 구체적인 용도를 주로 소개하고 참고용으로 제공합니다.

컴포넌트 통신에 대해서는 다들 아실 거라 생각해서 자세히 설명하지 않겠습니다. 컴포넌트 통신에 대해 잘 모르시는 분들은 여기로 가보세요.

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

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

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

Vue 공식 문서에는 다음과 같은 정의가 있습니다. 비부모-자식 구성 요소의 통신에는 다음과 같이 내용이 거의 없습니다.

실제로 비부모-자식 구성 요소의 통신에 대한 데모가 여전히 있습니다. $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);
},

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. .

관련 기사:

Vue에서 이벤트 반응 진행률 표시줄 구성 요소를 구현하는 방법

JS에서 두 변수 값의 교환 방법을 구현하는 방법

Vue에서 사용자 정의 지침을 구현하는 방법은 무엇입니까?

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