84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
Vue 3에서 이벤트 버스를 만드는 방법은 무엇입니까?
Vue 2에서는 다음과 같습니다.
export const 버스 = new Vue();
bus.$on(...) 버스.$방출(...)
Vue 3에서 Vue는 더 이상 생성자가 아니며 Vue.createApp({});는 $ on< ;/code> 객체 코드> 및 $emit
Vue
Vue.createApp({});
$ on< ;/code> 객체 코드> 및 $emit
$emit
Vue.js 버전 3에서는 타사 라이브러리를 사용하거나 게시자-구독자(PubSub 개념) 프로그래밍 패턴으로 작성된 기능을 사용할 수 있습니다.
event.js
index.js
공식문서에 제안된 대로mitt라이브러리를 사용하여 구성 요소 간에 이벤트를 전달할 수 있습니다. 사이드바와 사이드바를 닫거나 여는 버튼이 포함된header가 있다고 가정하면 해당 버튼이 필요합니다. 사이드바 구성 요소 내에서 특정 속성을 전환합니다.
header가 있다고 가정하면 해당 버튼이 필요합니다. 사이드바 구성 요소 내에서 특정 속성을 전환합니다.
main.js에서 라이브러리를 가져오고 이미터의 인스턴스를 생성한 후 이를전역 속성으로 정의합니다.
설치:
사용법:
헤더에 일부 페이로드가 포함된toggle-sidebartoggle-sidebar 이벤트를 내보냅니다.
toggle-sidebar
사이드바에 페이로드가 포함된 이벤트 수신:
컴포지션 API를 사용하는 경우 다음과 같이emitter이미터를 사용할 수 있습니다.
emitter
src/composables/useEmitter.js 파일 만들기
여기서useEmitter，就像使用useRouteruseRouter처럼
useEmitter
useRouter
으아악조합 API 사용
eventBus.js
으아악
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vue.js 버전 3에서는 타사 라이브러리를 사용하거나 게시자-구독자(PubSub 개념) 프로그래밍 패턴으로 작성된 기능을 사용할 수 있습니다.
event.js
으아악index.js
으아악공식문서에 제안된 대로mitt라이브러리를 사용하여 구성 요소 간에 이벤트를 전달할 수 있습니다. 사이드바와 사이드바를 닫거나 여는 버튼이 포함된
header가 있다고 가정하면 해당 버튼이 필요합니다. 사이드바 구성 요소 내에서 특정 속성을 전환합니다.main.js에서 라이브러리를 가져오고 이미터의 인스턴스를 생성한 후 이를전역 속성으로 정의합니다.
설치:
으아악사용법:
으아악헤더에 일부 페이로드가 포함된
으아악toggle-sidebartoggle-sidebar 이벤트를 내보냅니다.사이드바에 페이로드가 포함된 이벤트 수신:
으아악컴포지션 API를 사용하는 경우 다음과 같이
emitter이미터를 사용할 수 있습니다.src/composables/useEmitter.js 파일 만들기
으아악여기서
useEmitter를 사용할 수 있습니다.useEmitter，就像使用useRouteruseRouter처럼으아악조합 API 사용
새로운 구성 API의 이점을 활용하고 구성 가능한 이벤트 버스를 정의할 수도 있습니다.eventBus.js
으아악
구성요소 A에서 다음을 수행합니다.으아악
컴포넌트 B: 으아악