suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Vue.js 3-Ereignisbus

<p>Wie erstelle ich einen Event-Bus in Vue 3? </p> <hr /> <p>In Vue 2 ist es: </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>In Vue 3 ist <code>Vue</code> kein Konstruktor mehr und <code>Vue.createApp({});</code> gibt einen Wert ohne <code>$ zurück ;/code> Objektcode> und <code>$emit</code> </p>
P粉905144514P粉905144514458 Tage vor474

Antworte allen(2)Ich werde antworten

  • P粉638343995

    P粉6383439952023-08-25 16:53:26

    在 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;
    

    Antwort
    0
  • P粉744831602

    P粉7448316022023-08-25 00:55:58

    按照官方文档中的建议,您可以使用 mitt 库在组件之间调度事件,假设我们有一个侧边栏和 header< /code> 其中包含一个关闭/打开侧边栏的按钮,我们需要该按钮来切换侧边栏组件内的某些属性:

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

    Antwort
    0
  • StornierenAntwort