VUE框架Vue3使用全局事件总线的方式传递数据------VUE框架

import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
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>
    <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>