VUE framework Vue3 uses the global event bus to transfer data------VUE framework

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

import my from 'my';

// This will create an object emitter

// Just treat it as a global event bus object

export default 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>

<template>

    <User></User>

</template>

<script>

//Import the global event bus object

import emitter from "./utils/event-bus.js";

import User from './components/User.vue';

//Introduce the combined API life cycle hook function

import { onMounted } from "vue";

export default {

  components: { User },

    name : "App",

    setup(){

        //Import life cycle mounted

        onMounted(() => {

            emitter.on('event1',showInfo);

        });

        function showInfo(user){

            alert(`Name${user.name}Age${user.age}`);

        }

        return {showInfo};

    }

}

</script>

<style>

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

<template>

    <button @click="triEvent">触发</button>

    <button @click="remove()">Remove all bindings</button>

    <button @click="removeEvent1()">Unbind 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(){

            // clear all

            emitter.all.clear();

        }

        function removeEvent1(){

            emitter.off('event1');

        }

        return {triEvent,remove,removeEvent1};

    }

}

</script>

<style>

</style>