Ⅰ.이벤트버스란?
평신도의 용어로 모든 구성 요소에서 메시지(매개변수) ->를 구성 요소에 전달하고 특정 논리를 실행하려고 합니다.
Ⅱ. vue3가 eventBus를 사용하는 방법
- vue3에는 eventBus가 없으므로 직접 작성해야 하지만 매우 간단합니다.
1단계(eventBus 컨테이너)
- src 디렉토리에 직접 작성한 bus.js를 저장할 버스 폴더를 만듭니다.
- bus.js 작성 => 클래스 프로토타입에 세 가지(구독, 구독 취소, 게시) 기능을 바인딩합니다.
// bus.js
class Bus {
constructor() {
this.list = {
}; // 收集订阅
}
// 订阅
$on(name, fn) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
}
// 发布
$emit(name, data) {
if (this.list[name]) {
this.list[name].forEach((fn) => {
fn(data); });
}
}
// 取消订阅
$off(name) {
if (this.list[name]) {
delete this.list[name];
}
}
}
export default new Bus;
- 구독자(on), 함수를 목록에 넣음 => 게시자(방출)를 기다림, 호출할 매개변수 전달;
- 함수는 객체이기 때문에 메모리 주소는 변경되지 않았으며 여전히 구독자(on) 구성 요소에서 실행됩니다.
2단계(구독자)
- comA.vue에서 구독하십시오.
- 구독은 기능만 저장하고 게시될 때까지 실행하지 않습니다.
<template>
<div>
{
{ name }} --- {
{ age }}
</div>
</template>
<script>
import {
ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
setup() {
const name = '张三';
const age = ref(18)
Bus.$on('addAge',({
num })=>{
age.value = num; })
//组件卸载时，取消订阅
onUnmounted( () => {
Bus.$off('addAge') } )
}
}
</script>
- 구성 요소를 떠날 때(onUnmounted), 등록 및 구독 함수의 배열을 삭제하여 더 많이 저장하지 않도록 합니다.
3단계(게시자)
- comB.vue에 게시합니다.
- 구독을 호출하고 매개변수를 전달합니다.
<template>
<button @click="fabu">发布</button>
</template>
<script>
import Bus from '../bus/bus.js';
export default {
setup() {
function fabu(){
Bus.$emit('addAge',{
age:'19'});
}
}
}
</script>
- 퍼블리싱 후 가입자의 컴포넌트가 실행되는데, 해당 서브스크립션과 퍼블리싱의 이름이 같아야 합니다.