eventBus 형제 구성 요소 통신에 대한 자세한 설명

이번에는 eventBus 형제 컴포넌트 통신에 대한 자세한 설명을 가져왔습니다. eventBus 형제 컴포넌트 통신에 대한 주의 사항은 무엇입니까?

vue1.0에서는 구성 요소 간 통신은 주로 vm.$dispatch가 상위 체인을 따라 로 업로드되고 vm.$broadcast가 하향으로 이루어집니다. 그러나 vue2.0에서는 이 사용법이 폐지되었습니다.

vuex를 추가하면 구성 요소 간의 통신이 더 명확해집니다. 중대형 프로젝트의 경우 처음부터 vuex 사용을 계획하는 것이 현명한 선택입니다.

그러나 일부 소규모 프로젝트에서 또는 $.broadcast 및 $dispatch를 vue2.0에서 작성 절반만 사용할 수 없다는 사실을 발견한 저와 같은 사람들에게는 보다 편리한 솔루션이 필요합니다. 그러면 eventBus의 역할이 반영됩니다.

주요 실제 접근 방식은 서로 통신하려는 형제 구성 요소 사이에 새로운 vue 인스턴스를 도입한 다음 이 인스턴스의

event 트리거링 및 모니터링을 각각 호출하여 통신 및 매개 변수 전송을 실현하는 것입니다.

간단한 예는 다음과 같습니다.

예를 들어 여기에는

main.vue, click.vue 및 show.vue라는 세 가지 구성 요소가 있습니다. click 및 show는 상위 구성 요소 기본 아래에 있는 형제 구성 요소이고, click은 v-for를 통해 상위 구성 요소의 여러 목록 항목을 탐색합니다. 여기서 구현해야 할 것은 click 구성 요소에서 클릭 이벤트가 트리거된 후 show 구성 요소가 어떤 DOM 요소가 클릭되었는지 콘솔을 표시한다는 것입니다.

먼저 클릭 구성 요소에 클릭 이벤트를 추가합니다

<p class="click" @click.stop.prevent="doClick($event)"></p>

doClick() 메서드에서 show 구성 요소와의 통신을 구현하려면 새로운 js 파일을 생성하여 eventBus를 생성해야 합니다. 이름은 bus.js

import Vue from 'vue'; 
export default new Vue();

입니다. 이런 방식으로 새로운 vue 인스턴스를 생성합니다. 다음으로 이를 click 구성 요소와 show 구성 요소로 가져옵니다.

rreee

다음으로 doClick 메소드에서 이벤트를 트리거합니다:

import Bus from 'common/js/bus.js';

여기에서는 클릭 구성 요소를 클릭할 때마다 'getTarget'이라는 이벤트가 버스에서 트리거되고 클릭 이벤트의 event.target이 이벤트를 따라 전달됩니다.

다음으로, 이 이벤트를 수신하고 매개변수를 수신하려면 show 구성 요소의 Created() 후크에서 버스를 호출해야 합니다.

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

이러한 방식으로 클릭 구성 요소의 각 클릭 이벤트에서 event.target이 쇼에 전달되고 콘솔됩니다.

그래서 eventBus를 사용하는 것은 여전히 ​​매우 편리하지만 중대형 프로젝트이고 통신이 더 복잡하다면 vuex를 직접 사용하는 것이 좋습니다. ​

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

추천 자료:

vue 배열 및 객체 할당 문제

Bootstrap 및 Vue 작업 사용자 정보 추가 및 삭제

Yuansheng JS는 비동기 파일 업로드를 어떻게 구현합니까?

위 내용은 eventBus 형제 구성 요소 통신에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!