Pada Vue.js versi 3, anda boleh menggunakan perpustakaan atau fungsi pihak ketiga yang ditulis dalam corak pengaturcaraan penerbit-pelanggan (konsep PubSub).

event.js

//events - a super-basic Javascript (publish subscribe) pattern class Event{ constructor(){ this.events = {}; } on(eventName, fn) { this.events[eventName] = this.events[eventName] || []; this.events[eventName].push(fn); } off(eventName, fn) { if (this.events[eventName]) { for (var i = 0; i < this.events[eventName].length; i++) { if (this.events[eventName][i] === fn) { this.events[eventName].splice(i, 1); break; } }; } } trigger(eventName, data) { if (this.events[eventName]) { this.events[eventName].forEach(function(fn) { fn(data); }); } } } export default new Event();

index.js

import Vue from 'vue'; import $bus from '.../event.js'; const app = Vue.createApp({}) app.config.globalProperties.$bus = $bus;

Seperti yang dicadangkan dalam dokumentasirasmi, anda boleh menggunakan perpustakaanmittuntuk menghantar acara antara komponen, dengan mengandaikan kami mempunyai bar sisi danpengepala yang mengandungi butang untuk menutup/membuka bar sisi, kami memerlukan Butang itu untuk togol sifat tertentu dalam komponen bar sisi:

Import perpustakaan dalam main.js dan buat contoh pemancar ini dan takrifkannya sebagaiharta global:

Pemasangan:

npm install --save mitt

Penggunaan:

import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt'; const emitter = mitt(); const app = createApp(App); app.config.globalProperties.emitter = emitter; app.mount('#app');

Pancarkan acaratoggle-sidebartogol-bar sisi dengan beberapa muatan dalam pengepala:

Terima acara dengan muatan di bar sisi:

Bagi mereka yang menggunakan API gubahan, mereka boleh menggunakanemitterpemancar seperti berikut:

Buat fail src/composables/useEmitter.js

import { getCurrentInstance } from 'vue' export default function useEmitter() { const internalInstance = getCurrentInstance(); const emitter = internalInstance.appContext.config.globalProperties.emitter; return emitter; }

Dari situ, anda boleh menggunakanuseEmitter，就像使用useRouteruseEmitter seperti yang anda lakukan

useRouter:

import useEmitter from '@/composables/useEmitter' export default { setup() { const emitter = useEmitter() ... } ... }

Gunakan API Gabungan

Anda juga boleh mendapat manfaat daripada API gubahan baharu dan menentukan bas acara boleh gubah:

eventBus.js

import { ref } from "vue"; const bus = ref(new Map()); export default function useEventsBus(){ function emit(event, ...args) { bus.value.set(event, args); } return { emit, bus } }

Lakukan perkara berikut dalam komponen A:

import useEventsBus from './eventBus'; ... //in script setup or inside the setup hook const {emit}=useEventsBus() ... emit('sidebarCollapsed',val)

Dalam komponen B:

const { bus } = useEventsBus() watch(()=>bus.value.get('sidebarCollapsed'), (val) => { // destruct the parameters const [sidebarCollapsedBus] = val ?? [] sidebarCollapsed.value = sidebarCollapsedBus })