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>

效果:

相关推荐
喝可乐的布偶猫10 分钟前
韩顺平之第九章综合练习-----------房屋出租管理系统
java·开发语言·ide·eclipse
江山如画,佳人北望29 分钟前
C#程序入门
开发语言·windows·c#
巴巴_羊39 分钟前
React Ref使用
前端·javascript·react.js
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想1 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷2 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson2 小时前
使用Ruby接入实时行情API教程
javascript·python
念九_ysl2 小时前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
yaoxin5211232 小时前
124. Java 泛型 - 有界类型参数
java·开发语言