VUE-Framework Vue3 verwendet den globalen Ereignisbus zur Datenübertragung ------VUE-Framework

import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();

importiere my von 'my';

// Dadurch wird ein Objekt-Emitter erstellt

// Behandeln Sie es einfach als globales Ereignisbusobjekt

Export Standard mitt();

<template>
    <User></User>
</template>

<script>
// 导入全局事件总线对象
import emitter from "./utils/event-bus.js";
import User from './components/User.vue';
// 引入组合式API生命周期钩子函数
import { onMounted } from "vue";
export default {
  components: { User },
    name : "App",
    setup(){
        // 导入生命周期mounted
        onMounted(() => {
            emitter.on('event1',showInfo);
        });
        function showInfo(user){
            alert(`姓名${user.name}年龄${user.age}`);
        }
        return {showInfo};
    }
}
</script>

<style>

</style>

<Vorlage>

    <Benutzer></Benutzer>

</template>

<Skript>

//Importieren Sie das globale Ereignisbusobjekt

Emitter aus „./utils/event-bus.js“ importieren;

Benutzer aus „./components/User.vue“ importieren;

//Führen Sie die kombinierte API-Lebenszyklus-Hook-Funktion ein

import { onMounted } from „vue“;

Standard exportieren {

  Komponenten: {Benutzer},

    Name: „App“,

    aufstellen(){

        //Lebenszyklus importieren

        onMounted(() => {

            emitter.on('event1',showInfo);

        });

        Funktion showInfo(user){

            Alert(`Name${user.name}Alter${user.age}`);

        }

        return {showInfo};

    }

}

</script>

<Stil>

</style>

<template>
    <button @click="triEvent">触发</button>
    <button @click="remove()">解除所有绑定</button>
    <button @click="removeEvent1()">解除event1绑定</button>
</template>

<script>
import emitter from "../utils/event-bus.js";
export default {
    name : "User",
    setup(){
        function triEvent(){
            emitter.emit("event1",{name:"Jack",age:30})
        }
        function remove(){
            // 清除所有
            emitter.all.clear();
        }
        function removeEvent1(){
            emitter.off('event1');
        }
        return {triEvent,remove,removeEvent1};
    }
}
</script>

<style>

</style>

<Vorlage>

    <button @click="triEvent">Anzeigen</button>

    <button @click="remove()">Alle Bindungen entfernen</button>

    <button @click="removeEvent1()">Ereignis1 entbinden</button>

</template>

<Skript>

Emitter aus „../utils/event-bus.js“ importieren;

Standard exportieren {

    Name: „Benutzer“,

    aufstellen(){

        Funktion triEvent(){

            emitter.emit("event1",{name:"Jack",age:30})

        }

        Funktion entfernen(){

            // alles löschen

            emitter.all.clear();

        }

        Funktion removeEvent1(){

            emitter.off('event1');

        }

        return {triEvent,remove,removeEvent1};

    }

}

</script>

<Stil>

</style>