Vue.js 3 事件匯流排
P粉905144514
P粉905144514 2023-08-24 18:08:45
0
2
472
<p>如何在 Vue 3 中建立事件匯流排? </p> <hr /> <p>在 Vue 2 中,它是:</p> <pre class="brush:js;toolbar:false;">export const bus = new Vue(); </pre> <pre class="brush:js;toolbar:false;">bus.$on(...) bus.$emit(...) </pre> <hr /> <p>在Vue 3 中,<code>Vue</code> 不再是建構子,<code>Vue.createApp({});</code> 傳回一個沒有<code>$ on</code> 的物件code> 和<code>$emit</code> 方法。 </p>
P粉905144514
P粉905144514

全部回覆(2)
P粉638343995

在 Vue.js 版本 3 上,您可以使用第三方程式庫,也可以使用以發布者-訂閱者(PubSub 概念)程式設計模式編寫的功能。

事件.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;
P粉744831602

依照官方文件中的建議,您可以使用mitt 函式庫在元件之間調度事件,假設我們有一個側邊欄和header 其中包含一個關閉/開啟側邊欄的按鈕,我們需要該按鈕來切換側邊欄元件內的某些屬性:

在 main.js 中匯入該函式庫並建立該發射器的實例並定義為 全域屬性

安裝:

npm install --save mitt

用法:

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');

在標頭中發出帶有一些負載的 toggle-sidebar 事件:

<template>
  <header>
    <button @click="toggleSidebar"/>toggle</button>
  </header>
</template>
<script >
export default { 
  data() {
    return {
      sidebarOpen: true
    };
  },
  methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen;
      this.emitter.emit("toggle-sidebar", this.sidebarOpen);
    }
  }
};
</script>

在側邊欄中接收具有有效負載的事件:

<template>
  <aside class="sidebar" :class="{'sidebar--toggled': !isOpen}">
  ....
  </aside>
</template>
<script>
export default {
  name: "sidebar",
  data() {
    return {
      isOpen: true
    };
  },
  mounted() { 
    this.emitter.on("toggle-sidebar", isOpen => {
      this.isOpen = isOpen;
    });
  }
};
</script>

對於那些使用組合 API 的人,他們可以使用emitter,如下所示:

建立檔案 src/composables/useEmitter.js

##
import { getCurrentInstance } from 'vue'

export default function useEmitter() {
    const internalInstance = getCurrentInstance(); 
    const emitter = internalInstance.appContext.config.globalProperties.emitter;

    return emitter;
}

從那裡開始,您可以使用 useEmitter,就像使用 useRouter 一樣:

import useEmitter from '@/composables/useEmitter'

export default {
  setup() {
    const emitter = useEmitter()
    ...
  }
  ...
}

使用組合 API

#您也可以受益於新的組合 API 並定義可組合事件匯流排:

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
    }
}

在元件 A 中執行以下操作:

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

在元件 B 中:

const { bus } = useEventsBus()

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板