Vue의 버스 글로벌 이벤트 센터(자세한 튜토리얼)

ue-bus는 글로벌 이벤트 센터를 제공하고 이를 각 구성요소에 주입합니다. 내장된 이벤트 스트림을 사용하는 것처럼 편리하게 글로벌 이벤트를 사용할 수 있습니다. 이 글에서는 Vue Bus 글로벌 이벤트 센터의 간단한 데모를 소개합니다. 필요하신 분들은 참고하시면 됩니다

1. vue-cli로 프로젝트를 빌드한 후 npm을 사용하여 vue-bus

 npm install vue-bus

2 .js의 항목 파일 메인에서

 import Vue from 'vue';
 import VueBus from 'vue-bus';
 Vue.use(VueBus);

3. 데이터 전달:

this.$bus.emit("eventName",data)

4. 데이터 수신:

this.$bus.on("eventName",data)

5. 의 이는 현재 vm 인스턴스의 경우 일반적으로 구성 요소 수명 주기 함수에서 생성되거나 마운트되는 이벤트를 가리켜야 합니다. 버스 등록을 취소하려면 beforeDestroy에 있어야 합니다. 버스 이벤트가 여러 번 트리거되는 문제와 관련하여, 한편으로는 vue 구성 요소가 재사용되어 버스 이벤트가 반복적으로 등록되어 "동일한 이벤트 이름" 버스와 전송 및 수신 간의 고유한 관계가 파괴되기 때문일 수 있습니다. 페이지가 라우팅되더라도 원래 페이지의 버스 이벤트는 취소되지 않았으며 여전히 프로그램에 숨겨져 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue.js_vue.js의 $set 및 배열 업데이트 방법

선택 구성 요소의 선택된 값 방법을 JQuery 선택함

vue를 vue-i18n과 결합하여 배경 데이터 구현 언어 전환 방법

위 내용은 Vue의 버스 글로벌 이벤트 센터(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!