요구 사항: Vue 구성 요소에서 가장 일반적인 데이터 전송은 상위 구성 요소와 하위 구성 요소 간의 전송입니다. 상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달할 수 있고 하위 구성 요소는 $emit 이벤트를 통해 상위 구성 요소에 데이터를 전달할 수 있습니다. 그러나 두 페이지가 관계가 없을 때 어떻게 통신해야 합니까 ? 이는 EventBus(이벤트 버스) 의 개념 으로 이어집니다.
여기서는 Vue2와 Vue3에서 각각 이벤트 버스의 사용법을 소개합니다.
Vue2에서 사용
EventBus 소개
이벤트 버스라고도 알려진 EventBus는 글로벌 웨어하우스와 동일하며 모든 구성요소는 이벤트
초기화를 위해 이 웨어하우스로 이동할 수 있습니다.
방법 1: 새 파일 만들기
먼저 EventBus를 초기화하고 Vue 인스턴스 개체를 공유해야 합니다. EventBus.js
와 같은 새 js 파일을 만듭니다.
// src/utils/EventBus.js 文件
import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()
방법 2: Vue 프로토타입에 마운트
main.js에서 EventBus 초기화
// src/main.js
Vue.prototype.$EventBus = new Vue()
데이터
A 구성 요소를 전달하는 코드는 다음과 같습니다.
<template>
<div>
<button @click="send">点我发送消息</button>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data:()=>({
a_data: 'message'
}),
methods: {
send () {
EventBus.$emit('share', this.a_data);
}
}
}
</script>
구성요소 B의 코드는 다음과 같습니다.
<template>
<div>
<h1>{
{
b_data }}</h1>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data: () => ({
b_data: null
}),
created () {
EventBus.$on('share', value => {
// 将 A 组件传递过来的数据保存到 B 组件
this.b_data = value;
})
},
beforeDestroy() {
// 移除监听事件 "share"
EventBus.$off('share')
}
}
</script>
참고:
즉, 구성 요소 A는 EventBus에 이벤트를 한 번만 보냈지만 구성 요소 B는 여러 번 수신했습니다. EventBus 컨테이너에는 동일한 이벤트 리스너가 많이 있습니다. 이때 이벤트는 한 번만 트리거되지만 수신 이벤트는 의 콜백 함수가 여러 번 실행되었습니다.
1. 해결 방법: 다음 번에 다시 청취 이벤트가 생성되지 않도록 구성 요소가 떠나기 전, 즉 파괴되기 전에 청취 이벤트를 제거하십시오. 2. 구문
: EventBus.$off (삭제 예정 모니터링할 이벤트 이름)
Vue3에서 사용
방금 언급한 EventBus는 vue3에서 버스를 생성하는 데 사용할 수 없습니다. 여기서는 타사 플러그인 Mitt를 사용합니다. Mitt는
Vue.js 애플리케이션에 사용되는 작은 이벤트 버스 라이브러리입니다. 이 라이브러리를 사용하면 구성 요소가 상위 구성 요소나 하위 구성 요소 간의 소품에 크게 의존하지 않고도 통신할 수 있습니다.
Mitt의 특징과 기능 소개
Lightweight: Mitt는 크기가 200byte에 불과하여 애플리케이션에 부담을 주지 않습니다.
사용하기 쉽습니다. mitt를 도입하고 사용하도록 구성하기만 하면 됩니다.
모든 Javascript 환경 지원: Mitt 모든 Javascript 환경을 지원합니다. Vue
애플리케이션 시나리오에 국한되지 않고 아래에서 사용됩니다. 구성 요소 통신
미트를 소개합니다
종속성 설치
설치 명령 실행
npm install --save mitt
src 디렉터리 아래에 다음 내용으로 새 /utils/bus.js를 만듭니다.
// 事件总线第三方库：
import mitt from 'mitt'
const bus = mitt()
export default bus
사용:
import bus from '@/utils/bus.js'
//in component A 触发
bus.emit('event-name', eventData)
//in component B 监听
bus.on('event-name', eventData => {
/* do something with eventData */ })
// 页面卸载的时候取消本次监听
bus.off('event-name'， eventData => {
/* do something with eventData */ })
TS 구문을 사용하는 경우 여기서 mitt는 다음과 같이 사용됩니다
. src 디렉터리 아래에 다음 내용으로 새 /utils/bus.ts를 만듭니다.
// https://www.npmjs.com/package/mitt
import mitt, {
Emitter } from 'mitt';
// 类型
const emitter: Emitter<MittType> = mitt<MittType>();
// 导出
export default emitter;
다음과 같이 사용하세요:
<script setup lang="ts" name="layoutBreadcrumbUser">
import mittBus from '/@/utils/mitt';
//in component A 触发
mittBus.emit('closeAllTagsView')
//in component B 监听
mittBus.on('closeAllTagsView', eventData => {
/* do something with eventData */ })
页面卸载的时候取消本次监听
mittBus.off('closeAllTagsView', eventData => {
/* do something with eventData */ })
</script >