数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、借助父组件传参

假设父组件 App 有两个子组件（同级组件） A 和 B：A 组件派发的事件，通过 App.vue 接收，然后通过 v-bind 传递给 B 组件。

 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;  } " _ue_custom_node_="true">

缺点：比较麻烦 ，无法直接通信，只能充当桥梁。

二、借助 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 组件触发事件并传递数据：

 import { getCurrentInstance } from 'vue'  const instance = getCurrentInstance();  const handleClick = () => {  instance?.proxy?.$Bus.emit('h-click', 1111)  } " _ue_custom_node_="true">  A组件 派发事件

B 组件监听并接收数据

 import { getCurrentInstance } from 'vue'  const instance = getCurrentInstance()  instance?.proxy?.$Bus.on('h-click', (arg) => {  console.log(arg)  })   B组件     " _ue_custom_node_="true">