mitt的使用

提示：在electron vite vue ts elementplus pinia 的基础上使用mitt

---

前言

一、mitt是什么？

主要用作vue中兄弟组件,隔代组件之间的传参

二、使用步骤

1.引入库

代码如下（示例）：

npm install mitt
下载成功之后可以在package.json中查看到依赖

2.配置

在main.ts 入口中插入一下代码
import mitt from 'mitt'
import App from './App.vue'
import { createApp } from 'vue'
const mit=mitt()
declare module 'vue'{
    export interface ComponentCustomProperties{
        $bus:typeof mit
    }
}
const app=createApp(App)
app.config.globalProperties.$bus=mit //设置全局参数

引用

例如需要在avatar.vue中间中,调用别的任何层次组件的函数
在avatar中注册一个函数,在另一个组件中监听

<script setup lang="ts">
  import { getCurrentInstance}from 'vue'
  const instance=getCurrentInstance()
    const avtClick=()=>{
   		instance?.proxy?.$bus.emit('showloginDialog',true) //传入参数 true
  }
  </script>
  <template>
<button @click="avaClick">
	</template>

import { getCurrentInstance}from 'vue'
  const instance=getCurrentInstance()
instance?.proxy?.$bus.on('showloginDialog',(v)=>console.log(v)) //v为true