이벤트의 공공 버스 eventBus 에센스는 VUE 예제를 만들 다리로 빈 인스턴스를 통해 구성 요소 VUE의 VUE 사이의 통신을 가능하게하는 것이다. 비 부모 - 자식 통신 구성 요소를 달성하기위한 솔루션입니다.

사용법은 다음과 같습니다

첫 번째 단계 : 프로젝트의 js 파일을 생성이 예제를 수출하는 VUE 인스턴스를 생성, 아래의 코드 (두 줄에 총을) VUE의 도입을 (나는 보통 그것을 bus.js로 이름을 부여)

'보기'에서 1 개 가져 오기보기 
2 수출의 새로운 기본보기

두 번째 단계는 두 개의 구성 요소가 통신 할 필요가 각각 bus.js에 도입

1 개 수입 버스 // 버스 사랑의 이름을 자유롭게 변경할 수 '여기가 당신의 소개 bus.js 경로입니다'

세 번째 단계 : 이벤트 이름 전사 어셈블리 데이터 및 데이터는 $ VUE 인스턴스 메소드를 통해 전달할 필요가 방출 보내. (송신 데이터 성분)

1 버스. 데이터 $의 발광 ( '클릭'데이터) //이 이벤트는 사용자 정의, 당신이 통과 할 데이터의 이름을 클릭합니다.

네번째 단계 : 어셈블리가 이벤트 청취자와의 데이터 예 방법 VUE $으로하여 수신 된 데이터를 전달한다. 여기에이 말을하지 않는, VUE 라이프 사이클에 장착 된 모니터는 일반적으로 생성 및 분석에 필요한 자세한 특정 사용 시나리오 중 장착이 (구성 요소는 데이터를 수신).

. 버스 $ 1 ( '을 클릭', 목표 => {ON 
2 CONSOLE.LOG (대상) 참고 // : 전송 및 이벤트 이름을 듣는 것은 동일 대상이 데이터를 얻을 것입니다해야합니다, 당신은 당신이 무엇을 원하는대로 대상 쓸 수 없습니다 (물론, 그것은 형식 매개 변수의 명명 규칙을 준수해야합니다)되어 
3})

위의 네 단계의 사실을 통해 eventbus의 가장 간단한 실용적인 응용 프로그램을 달성했다.

그러나 여기, 가장 쉽게 간과 중 하나에주의를 지불해야합니다,하지만 피할 수없는 일을 잊을 수 없다, 그것은 이벤트 버스 EventBus 분명 .

하지 않았에만 수행 번 인수 작업은 여러 작업을해야합니다, 반복 구성 요소에 데이터를 입력에 문제가 데이터 수집 작업이 수용 할 수있다, 수동, 항상 존재하는 것입니다 삭제, 그래서. 내가 인용 한 예로서, 단지 데이터에 여러 패스를 인쇄 할 수 있습니다. 그러나 당신이 그것에 대해 생각, 실제 개발은 콘솔이 데이터를 인쇄 그렇게 간단하지 않다, 단지 한 번만 실행 방아쇠했다, 지금은 많은 시간이되었다, 문제가 매우 심각하며, 특정 뇌의 다양한 만들기 프로젝트 개발 바 장면.

VUE 수명주기 beforeDestroy에 걸린 eventBus 또는 방법을 사용 VUE의 파괴 $ 오프 예 : 5 단계

1 beforeDestroy () { 
2 개 버스. ( '클릭') 오프 $ 
3}

요약하면, 여기에 비 사용 eventBus 부모 - 자식 통신 구성 요소를 해결하는 방법이지만, 경우 프로젝트가 더 크고 더 복잡한 적합하지 않습니다. 그때까지, vuex의 VUE은 우리가 제공하는 최선의 방법입니다.

참고 : 위의 순수 예금 개인적인 이해하고, 서로 다른 의견이나 제안이 학습의 교환이 환영합니다!

당신에게 지원, 재 인쇄 또는 다른 목적을 감사드립니다. HTTPS : //www.cnblogs.com/singerlee-changealive/ 소스를 표시하시기 바랍니다