집 >웹 프론트엔드 >JS 튜토리얼 >vue2.0s에서 형제 구성 요소 통신의 eventBus 구현에 대한 자세한 설명

vue2.0s에서 형제 구성 요소 통신의 eventBus 구현에 대한 자세한 설명

小云云원래의: 2018-01-22 09:18:301324검색

이 글은 형제 컴포넌트 통신을 구현하기 위한 vue2.0s의 eventBus 샘플 코드를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

vue1.0에서는 구성 요소 간의 통신은 주로 상위 체인을 따라 위쪽으로 전파되는 vm.$dispatch와 아래쪽으로 전파되는 vm.$broadcast를 통해 이루어집니다. 그러나 vue2.0에서는 이 사용법이 폐지되었습니다.

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

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

주요 실제 접근 방식은 서로 통신하려는 형제 구성 요소 사이에 새로운 vue 인스턴스를 도입한 다음 이 인스턴스의 이벤트 트리거링 및 모니터링을 각각 호출하여 통신 및 매개 변수 전송을 구현하는 것입니다.

다음은 간단한 예입니다.

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

먼저 click 컴포넌트에 클릭 이벤트를 추가합니다

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

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

import Vue from &#39;vue&#39;; 
export default new Vue();

로 지정하여 새 vue 인스턴스를 만듭니다. 다음으로 이를 click 구성 요소와 show 구성 요소로 가져옵니다.

import Bus from &#39;common/js/bus.js&#39;;

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

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

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

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

created() { 
    Bus.$on(&#39;getTarget&#39;, target => { 
      console.log(target); 
    }); 
   }

이런 식으로 클릭 구성 요소의 각 클릭 이벤트에서 이벤트 . 대상이 표시되고 콘솔로 전달됩니다.

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

vue2.0s에서 형제 구성 요소 통신의 eventBus 구현에 대한 자세한 설명

관련 기사