vue3+ts mitt的使用
安装mitt :npm i mitt -S
main.ts:
import mitt from 'mitt'
const Mit = mitt();
declare module 'vue' {
export interface ComponentCustomProperties{
$Bus:typeof Mit
}
}
app.config.globalProperties.$Bus=Mit
在A组件中使用
<template>
<div>
<h1>我是A</h1>
<button @click="emit">emit</button>
</div>
</template>
<script setup lang='ts'>
import {getCurrentInstance } from "vue";
const instance=getCurrentInstance();
const emit= ()=>{
instance?.proxy?.$Bus.emit("on-xiaoman","你是个小可爱")
}
</script>
<style>
</style>
在B组件中使用：
<template>
<div>
<h1>我是B</h1>
</div>
</template>
<script setup lang='ts'>
import {getCurrentInstance } from "vue";
const instance=getCurrentInstance();
instance?.proxy?.$Bus.on('on-xiaoman',(str)=>{
console.log(str,'+++++++++B')
})
</script>
<style>
</style>
效果：
