vue3+ts mitt的使用

javascript 复制代码
安装mitt :npm  i  mitt -S

main.ts:

javascript 复制代码
import  mitt  from  'mitt'
 const  Mit = mitt();
 declare module 'vue' {
  export interface ComponentCustomProperties{
    $Bus:typeof  Mit
  }
}
app.config.globalProperties.$Bus=Mit

在A组件中使用

handlebars 复制代码
<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组件中使用:

handlebars 复制代码
<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>

效果:

相关推荐
Python×CATIA工业智造1 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜2 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄2 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122463 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack4 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext4 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)5 小时前
后端快捷代码
java·开发语言