Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、借助父组件传参
假设父组件 App 有两个子组件（同级组件） A 和 B：A 组件派发的事件，通过 App.vue 接收，然后通过 v-bind 传递给 B 组件。
<script setup> import A from './components/A.vue' import B from './components/B.vue' import { ref } from 'vue' let flag = ref(false) const getflag = (arg) => { flag.value = arg; } </script> <template> <div> <A @on-click="getflag"></A> <B :flag="flag"></B> </div> </template>
缺点：比较麻烦 ，无法直接通信，只能充当桥梁。
二、借助 Event Bus 传参
Vue3 从实例中移除了 $on、$off 和 $once 方法，如果想要使用事件总线就需要自己手动写一个发布订阅模式来实现 Event Bus 。见下图：
class Bus { constructor() { this.list = { } } emit(eventName, ...args) { let eventFns = this.list[eventName] eventFns.forEach(fn => { fn.apply(this, args) }) } on(eventName, callback) { let fnArr = this.list[eventName] || [] fnArr.push(callback) this.list[eventName] = fnArr } off(eventName,callback) { let fnArr = this.list[eventName] || [] if(callback){ fnArr = fnArr.filter(v => v != callback) }else { fnArr = [] } this.list[eventName] = fnArr } } export default new Bus()
注：将其挂载到 Vue config 全局，或者在相关的组件中引入即可使用。
三、借助第三方插件
在vue3中 $on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的 EventBus 便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用 Mitt库。
安装
npm install mitt -S
main.js 中配置
import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' const Mit = mitt() const app = createApp(App) app.config.globalProperties.$Bus = Mit app.mount('#app')
组件中使用：通过 emit 方法派发事件， on 方法添加事件，off 方法移除事件，clear 清空所有事件。这跟我们自己手动封装的 EventBus 及其类似。‘
A 组件触发事件并传递数据：
<script setup lang='ts'> import { getCurrentInstance } from 'vue' const instance = getCurrentInstance(); const handleClick = () => { instance?.proxy?.$Bus.emit('h-click', 1111) } </script> <template> <div> <h1>A组件</h1> <button @click="handleClick">派发事件</button> </div> </template>
B 组件监听并接收数据
<script setup lang='ts'> import { getCurrentInstance } from 'vue' const instance = getCurrentInstance() instance?.proxy?.$Bus.on('h-click', (arg) => { console.log(arg) }) <template> <div> <h1>B组件</h1> </div> </template>
