当前位置: 首页 > news >正文

Vue3组件传参之Mitt插件方式

在vue3中$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库(其实就是我们视频中讲的发布订阅模式的设计)

一、安装

npm install mitt -S

二、main.ts 初始化

全局总线,vue 入口文件 main.js 中挂载全局属性

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

三、使用方法通过emit派发, on 方法添加事件,off 方法移除,clear 清空所有

A组件派发(emit)

<template><div><h1>我是A</h1><button @click="emit1">emit1</button><button @click="emit2">emit2</button></div>
</template><script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit1 = () => {instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {instance?.proxy?.$Bus.emit('*****', 500)
}
</script><style>
</style>

B组件监听(on)

<template><div><h1>我是B</h1></div>
</template><script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-num', (num) => {console.log(num,'===========>B')
})
</script><style>
</style>

监听所有事件( on("*") )

instance?.proxy?.$Bus.on('*',(type,num)=>{console.log(type,num,'===========>B')
})

移除监听事件(off)

const Fn = (num: any) => {console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//listen
instance?.proxy?.$Bus.off('on-num',Fn)//unListen

清空所有监听(clear)

instance?.proxy?.$Bus.all.clear()

转载自小满zs老师

相关文章:

Vue3组件传参之Mitt插件方式

在vue3中$on&#xff0c;$off 和 $once 实例方法已被移除&#xff0c;组件实例不再实现事件触发接口&#xff0c;因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus&#xff0c;对于这种情况我们可以使用Mitt库&#xff08;其实就是我们视频中讲的发布订阅模式的…...

【数据仓库】数仓分层方法

文章目录 一. 数仓分层的意义1. 清晰数据结构。2. 减少重复开发3. 方便数据血缘追踪4. 把复杂问题简单化5. 屏蔽原始数据的异常6. 数据仓库的可维护性 二. 如何进行数仓分层&#xff1f;1. ODS层2. DW层2.1. DW层分类2.2. DWD层2.3. DWS 3. ADS层 4、层次调用规范 一. 数仓分层…...

Linux网络——自定义协议

目录 一.什么是协议 二.协议与报文 三.自定义协议 1.封装套接字 2.构建请求与响应 3.序列化和反序列化 4.报头添加和去除 5.报文读取 四.服务器端程序 五.客户端程序 一.什么是协议 协议在生活中泛指&#xff1a;双方或多方为了完成某项任务或达成某种目的而制定的共…...

【OpenCV实现图像:用OpenCV图像处理技巧之巧用直方图】

文章目录 概要前置条件统计数据分析直方图均衡化原理小结 概要 图像处理是计算机视觉领域中的重要组成部分&#xff0c;而直方图在图像处理中扮演着关键的角色。如何巧妙地运用OpenCV库中的图像处理技巧&#xff0c;特别是直方图相关的方法&#xff0c;来提高图像质量、改善细…...

【Android】画面卡顿优化列表流畅度四之Glide几个常用参数设置

好像是一年前快两年了&#xff0c;笔者解析过glide的源码&#xff0c;也是因为觉得自己熟悉一些&#xff0c;也就没太关注过项目里glide的具体使用对当前业务的影响&#xff1b;主要是自负&#xff0c;还有就是真没有碰到过这样的数据加载情况。暴露了经验还是不太足够 有兴趣的…...

js控制手机蓝牙

要使用JavaScript控制手机蓝牙&#xff0c;您需要使用Web Bluetooth API。这是一种新的Web API&#xff0c;可以让Web应用程序访问和控制蓝牙设备。 以下是一些步骤&#xff0c;以便您开始使用Web Bluetooth API&#xff1a; 检查浏览器支持&#xff1a;首先&#xff0c;您需要…...

C++11 原始字符串字面量R“()“

原始字符串字面量&#xff08;Raw String Literals&#xff09; R"()"是C11引入的一项特性&#xff0c;它允许创建不需要转义字符的字符串字面量。字符串中包含特殊字符、换行符和其他转义字符时&#xff0c;不需要反斜杠转义它们。 原始(Raw)&#xff1a;不用使用反…...

【Vue原理解析】之虚拟DOM

Vue.js是一款流行的JavaScript框架&#xff0c;它采用了虚拟DOM&#xff08;Virtual DOM&#xff09;的概念来提高性能和开发效率。虚拟DOM是Vue.js的核心之一&#xff0c;它通过在内存中构建一个轻量级的DOM树来代替直接操作真实的DOM&#xff0c;从而减少了对真实DOM的操作次…...

HCIE-灾备技术和安全服务

灾备技术 灾备包含两个概念&#xff1a;容灾、备份 备份是为了保证数据的完整性&#xff0c;数据不丢失。全量备份、增量备份&#xff0c;备份数据还原。 容灾是为了保证业务的连续性&#xff0c;尽可能不断业务。 快照&#xff1a;保存的不是底层块数据&#xff0c;保存的是逻…...

【图论实战】Boost学习 01:基本操作

文章目录 头文件图的构建图的可视化基本操作 头文件 #include <boost/graph/adjacency_list.hpp> #include <boost/graph/graphviz.hpp> #include <boost/graph/properties.hpp> #include <boost/property_map/property_map.hpp> #include <boost/…...

Rust 中的引用与借用

目录 1、引用与借用 1.1 可变引用 1.2 悬垂引用 1.3 引用的规则 2、slice 类型 2.1 字符串字面量其实就是一个slice 2.2 总结 1、引用与借用 在之前我们将String 类型的值返回给调用函数&#xff0c;这样会导致这个String会被移动到函数中&#xff0c;这样在原来的作用域…...

Azure 机器学习:在 Azure 机器学习中使用 Azure OpenAI 模型

目录 一、环境准备二、Azure 机器学习中的 OpenAI 模型是什么&#xff1f;三、在机器学习中访问 Azure OpenAI 模型连接到 Azure OpenAI部署 Azure OpenAI 模型 四、使用自己的训练数据微调 Azure OpenAI 模型使用工作室微调微调设置训练数据自定义微调参数部署微调的模型 使用…...

XML Web 服务 Eclipse实现中的sun-jaxws.xml文件

说明 在sun-jaxws.xml文件&#xff0c;可以配置endpoint、handler-chain等内容。在这个文件中配置的内容会覆盖在Java代码中使用注解属性配置的的内容。 这个文件根据自己的项目内容修改完成以后&#xff0c;作为web应用的一部分部署到web容器中&#xff08;放到web应用的WEB…...

16.1 二次根式 教学设计及课堂检测设计

课堂检测如下&#xff1a;...

Android数据流的狂欢:Channel与Flow

在 Android 应用程序的开发中&#xff0c;处理异步数据流是一个常见的需求。为了更好地应对这些需求&#xff0c;Kotlin 协程引入了 Channel 和 Flow&#xff0c;它们提供了强大的工具来处理数据流&#xff0c;实现生产者-消费者模式&#xff0c;以及构建响应式应用程序。 本文…...

Java 单元测试最佳实践:如何充分利用测试自动化

单元测试是众所周知的做法&#xff0c;但还有很大的改进空间&#xff01;在这篇文章中&#xff0c;我们讨论最有效的单元测试最佳实践&#xff0c;包括在此过程中最大化自动化工具的方法。我们还将讨论代码覆盖率、模拟依赖关系和整体测试策略。 什么是单元测试&#xff1f; 单…...

windows系统用于 SDN 的软件负载均衡器 (SLB)

适用于&#xff1a;Azure Stack HCI 版本 22H2 和 21H2&#xff1b;Windows Server 2022、Windows Server 2019、Windows Server 2016 软件负载均衡器包括哪些内容&#xff1f; 软件负载均衡器提供以下功能&#xff1a; 适用于北/南和东/西 TCP/UDP 流量的第 4 层 (L4) 负载均…...

漏洞复现--IP-guard flexpaper RCE

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…...

Electron-vue出现GET http://localhost:9080/__webpack_hmr net::ERR_ABORTED解决方案

GET http://localhost:9080/__webpack_hmr net::ERR_ABORTED解决方案 使用版本解决方案解决总结 使用版本 以下是我解决此问题时使用的electron和vue等的一些版本信息 【附】经过测试 electron 的版本为 13.1.4 时也能解决 解决方案 将项目下的 .electron-vue/dev-runner.js…...

Linux---(六)自动化构建工具 make/Makefile

文章目录 一、make/Makefile二、快速查看&#xff08;1&#xff09;建立Makefile文件&#xff08;2&#xff09;编辑Makefile文件&#xff08;3&#xff09;解释&#xff08;4&#xff09;效果展示 三、背后的基本知识、原理&#xff08;1&#xff09;如何清理对应的临时文件呢…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...