vue3+TypeScript全局事件总线mitt

在vue3中 $ on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库

npm i mitt -S

首先要在全局挂载 mitt

在app.config.globalProperties上挂在$Bus

使用ts必须要拓展ComponentCustomProperties类型才能获得类型提示

main.ts

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import mitt from 'mitt'const Mit = mitt()
const app = createApp(App)//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module 'vue' {export interface ComponentCustomProperties {$Bus: typeof Mit}
}
//vue3挂载全局API
app.config.globalProperties.$Bus = Mit
app.mount('#app')

A.vue

在A中派发事件
getCurrentInstance是为了获取当前的组件实例
获取到当前组件的实例后,就可以在实例上的proxy获取到我们全局绑定的$Bus了

<template><div class="A">A<button @click="emitA"> 派发一个事件</button></div>
</template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()const emitA = () => {instance?.proxy?.$Bus.emit('on-EmitA', 'mitt')instance?.proxy?.$Bus.emit('on-EmitA2','mitt2')
}
</script><style lang="scss" scoped>
.A {width: 200px;height: 200px;background-color: aqua;.children {display: flex;justify-content: space-between;}
}
</style>

B 中就可以监听到事件了
.on的第一个参数是事件的名称 这样可以一次监听一个事件
第一个参数传入 * 即监听全部事件 此时回调函数传入的第一个参数接受绑定的事件名称,第二个参数接受传入的参数
B.vue

<template><div class="B">B<br></div>
</template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()const Bus = (str: any) => {console.log('b=====>str', str)
}
instance?.proxy?.$Bus.on('on-EmitA', Bus)//监听一个//同样的也有off方法
instance?.proxy?.$Bus.off('on-EmitA', Bus)instance?.proxy?.$Bus.all.clear()//清楚全部事件// instance?.proxy?.$Bus.on('*', (type, str) => {
//   console.log(type, 'b=====>str', str)
// })//监听多个
</script><style lang="scss" scoped>
@import '../style.scss';.B {width: 200px;height: 200px;background-color: $cloud-water;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

两年外包生涯做完,感觉自己废了一半。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…

laravel的ORM 对象关系映射

Laravel 中的 ORM&#xff08;Eloquent ORM&#xff09;是 Laravel 框架内置的一种对象关系映射系统&#xff0c;用于在 PHP 应用中与数据库进行交互。Eloquent 提供了一种优雅而直观的语法&#xff0c;使得开发者可以使用面向对象的方式进行数据库查询和操作。 定义模型&…

结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数&#xff1a; Component({data: {},attached() {console.log("自定义组件生命周期函数 attached--先执行");this.getPos();},ready() {console.log("ready生命周期函数---在attached之后执行")},methods: {getPos() {var that th…

数据结构:位图、布隆过滤器以及海量数据面试题

位图、布隆过滤器以及海量数据面试题 1.位图1.1概念1.2实现1.3位图应用 2.布隆过滤器2.1布隆过滤器的提出2.2布隆过滤器的概念2.3布隆过滤器的查找2.4布隆过滤器的实现2.5布隆过滤器的删除2.6布隆过滤器的优点2.7布隆过滤器的缺点 3.海量数据面试题3.1哈希切分3.2位图应用3.3布…

如何成为前1%的程序员

如果你想成为前1%的程序员&#xff0c;你必须遵循1%的程序员做什么&#xff0c;了解其他99%的人不做什么。在现代&#xff0c;我们有各种学习平台&#xff0c;里面充满了与编程相关的视频、图文以及其他资料。 举例来说&#xff0c;我作为编程的初学者&#xff0c;去寻找路线图…

IDEA2023找不到add framework support怎么解决

问题: 我的idea版本是2023.01&#xff0c;新版idea右键项目没有Add Framework Support&#xff0c;help里面也找不到相关的。 从project structue的facets里面添加就行了&#xff0c;都是一样的。 1.依旧是新建一个项目 2.file-->project structure--->facets 左上角加…

数据结构与程序的关系

在计算机科学中,数据结构和算法是两个核心的概念。数据结构是程序的基础,它组织和存储数据的方式直接影响程序的设计、效率、可读性以及程序的错误检测和调试。本文将详细讨论数据结构如何影响程序,以及数据结构与算法的组合如何使程序更高效、可靠。 一、数据结构的选择影…

Android studio如何安装ai辅助工具

引言 在没有翻墙的情况下&#xff0c;即单纯在公司打工&#xff0c;经测试&#xff0c;大部分ai工具都是使用不了的&#xff08;比如各种gpt,codeium,copilot&#xff09;&#xff0c;根本登录不了账号&#xff0c;但有一个国内的codegeex是可以使用的&#xff0c;在这里不对各…

tensorflow中张量tensor

在 TensorFlow 中&#xff0c;主要操作的对象是张量&#xff08;tf.Tensor&#xff09;。张量表示一个多维数组&#xff0c;可以执行各种操作以构建和修改计算图。以下是一些常见的 TensorFlow 张量操作&#xff1a; 1. 创建张量&#xff1a; 使用 tf.constant 创建常量张量。…

Android app性能优化指南

Android应用性能优化指南 提高应用程序的性能以实现更流畅的用户体验和更高的可见度。 性能在任何应用程序的成功中发挥着重要的作用。为用户提供流畅无缝的体验应该是开发人员的重点。 应用程序大小 在用户开始使用我们的应用程序之前&#xff0c;他们需要下载应用程序并将…

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接 8月16日—18日,第14届中国数据库技术大会(DTCC-2023)在北京国际会议中心举行。聚好看在大会上首次发布基于eBPF观测数据库性能的产品DBdoctor&#xff0c;受到了业界广泛的关注。近期几位业内同仁过来要大会的PPT…

2024考研数学二备考历程

GoodNotesGoodNotes apphttps://share.goodnotes.com/s/bhsraJMZ6OJwuYJb3OWnzP

Python点云处理(二十)点云轮廓边界提取——基于邻域三角形距离算法

目录 0 简述1 点云轮廓提取原理2 点云轮廓提取应用3 算法步骤4 代码实现5 结果展示0 简述 点云轮廓提取/边界提取,对于扫描物信息化提取、矢量化等都具有很重要的意义。扫描物体轮廓不仅包含位置和形状信息,而且可作为一种先验形状信息推断其结构以辅助三维模型重建,因此轮…

C/C++之输入输出

文章目录 一.C语言的输入输出1.printfi. 输出整数ii. 浮点数iii.字符 & 字符串 2.scanfi.整数ii.浮点数iii. 字符 & 字符串 3.特殊用法i. * 的应用ii. %n 的应用iii. %[] 的应用 二.C中的输入输出1.couti. 缓冲区&#xff08;buffer&#xff09;ii. cout之格式化输出 2…

Proteus仿真--串口发送数据到2片8×8点阵屏滚动显示

本文介绍2片88点阵屏滚动显示设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 仿真运行视频 Proteus仿真--1602LCD显示电话拨号键盘按键实验&#xff08;仿真文件程序&#xff09; 附完整Proteus仿真资料代码资料 链接&#xff1a;https://pan.baidu…

【python】函数的参数(实参,形参,*args和**kwargs)

一、实参和形参 实参&#xff1a; 函数执行的时候给函数传递的具体的值 形参&#xff1a; 在函数声明时编写的变量 函数执行时每个形参都要有值 # a,b为形参 def add(a, b):print(a b) # 3,4为实参 add(3, 4)二、实参 1.位置参数 按位置给形参传递数据 def add(a, b)…

使用C语言操作kafka ---- librdkafka

1 安装librdkafka git clone https://github.com/edenhill/librdkafka.git cd librdkafka git checkout v1.7.0 ./configure make sudo make install sudo ldconfig 在librdkafka的examples目录下会有示例程序。比如consumer的启动需要下列参数 ./consumer <broker> &…

一对一聊天程序

package untitled1.src;import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.*; import java.net.*;public class MyServer extends JFrame{private ServerSocket server; // 服务器套接字pri…

【漏洞复现】华脉智联指挥调度平台/xml_edit/fileread.php文件读取漏洞

Nx01 产品简介 深圳市华脉智联科技有限公司&#xff0c;融合通信系统将公网集群系统、专网宽带集群系统、不同制式、不同频段的短波/超短波对讲、模拟/数字集群系统、办公电话系统、广播系统、集群单兵视频、视频监控系统、视频会议系统等融为一体&#xff0c;集成了专业的有线…

第一课【习题】HarmonyOS应用/元服务上架

元服务发布的国家与地区仅限于“中国大陆” 编译打包的软件包存放在项目目录build > outputs > default下 创建应用时&#xff0c;应用包名需要和app.json5或者config.json文件中哪个字段保持一致&#xff1f; 发布应用时需要创建证书&#xff0c;证书类型选择什么…