Vue.js 3 이벤트 버스

Question

Vue 3에서 이벤트 버스를 만드는 방법은 무엇입니까?

<시간 />

Vue 2에서는 다음과 같습니다.

export const 버스 = new Vue();

bus.$on(...)
버스.$방출(...)

<시간 />

Vue 3에서 Vue는 더 이상 생성자가 아니며 Vue.createApp({});는 $ on< ;/code> 객체 코드> 및 $emit

Answer 1

Vue.js 버전 3에서는 타사 라이브러리를 사용하거나 게시자-구독자(PubSub 개념) 프로그래밍 패턴으로 작성된 기능을 사용할 수 있습니다.

event.js

으아악

index.js

으아악

Answer 2

공식 문서에 제안된 대로 mitt 라이브러리를 사용하여 구성 요소 간에 이벤트를 전달할 수 있습니다. 사이드바와 사이드바를 닫거나 여는 버튼이 포함된 header< /code>가 있다고 가정하면 해당 버튼이 필요합니다. 사이드바 구성 요소 내에서 특정 속성을 전환합니다.

main.js에서 라이브러리를 가져오고 이미터의 인스턴스를 생성한 후 이를 전역 속성으로 정의합니다.

설치:

으아악

사용법:

으아악

헤더에 일부 페이로드가 포함된 toggle-sidebartoggle-sidebar 이벤트를 내보냅니다.

으아악

사이드바에 페이로드가 포함된 이벤트 수신:

으아악

컴포지션 API를 사용하는 경우 다음과 같이 emitter이미터를 사용할 수 있습니다.

src/composables/useEmitter.js 파일 만들기

으아악

여기서 useEmitter，就像使用 useRouteruseRouter처럼

useEmitter를 사용할 수 있습니다.

으아악 조합 API 사용

새로운 구성 API의 이점을 활용하고 구성 가능한 이벤트 버스를 정의할 수도 있습니다.

eventBus.js

으아악

구성요소 A에서 다음을 수행합니다.

으아악

컴포넌트 B: 🎜 으아악