vue3+ts mitt的使用

news2024/11/26 20:29:39
安装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>

效果:
在这里插入图片描述

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

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

相关文章

Leetcode—160.相交链表【简单】

2023每日刷题&#xff08;四十一&#xff09; Leetcode—160.相交链表 算法思想 两个链表的节点之和是相等的 如果两个链表相交&#xff0c;那么相交点之后的长度是相同的 我们需要做的事情是&#xff0c;让两个链表从同距离末尾同等距离的位置开始遍历。这个位置只能是较短…

【高可用架构】Haproxy 和 Keepalived 的区别

Haproxy 和 Keepalived 的区别 1.负载均衡器介绍2.Haproxy 和 Keepalived 的基本概念和特点2.1 Haproxy2.2 Keepalived 3.Haproxy 和 Keepalived 的区别3.1 功能上的区别3.2 架构上的区别3.3 配置上的区别 4.总结 1.负载均衡器介绍 负载均衡器是一种解决高并发和高可用的常用的…

【JavaSE】:数据类型

数据类型 一.总体概论二.java里与c的区别1.float2.char3.boolen 三.类型转换四.String类型 一.总体概论 在Java中数据类型主要分为两类&#xff1a;基本数据类型和引用数据类型。 不论是在16位系统还是32位系统&#xff0c;int都占用4个字节&#xff0c;long都占8个字节 。 整…

NAS非接入层协议学习(二)

在无线通信网络中 NAS (Non-Access Stratum)做为非接入层是演进分组系统(或5G核心网)中的一组协议。NAS用于在用户设备(UE)和移动管理实体(MME/AMF)之间传送非无线电信令&#xff0c;以实现NR/LTE/E-UTRAN接入。 NAS在协议栈中是控制面的最高层。 NAS协议分组中可以将其分为两…

3款免费的语音视频转文本AI神器

最近有很多粉丝让我出一期关于语音转文本的免费AI神器&#xff0c;毕竟这类工具在学习和工作中经常会用到&#xff0c;那今天就给大家安排。 我亲测了好几款软件之后&#xff0c;最终评选留下了三款 剪映hugging face飞书妙记 接下来一一给大家讲解 1.剪映 剪映其实是一款视…

因式分解的几何意义

本来准备和女儿一起玩一道几何题&#xff0c;想想还是算了&#xff0c;不如讲点更有趣的。 任何因式分解都是在堆积木&#xff0c;不信你看&#xff1a; 二项式定理&#xff0c;洋灰三角&#xff0c;都是面积&#xff0c;体积&#xff0c;超维体积的拼接&#xff0c;一个大超…

Python | CAP - 累积精度曲线分析案例

CAP通常被称为“累积精度曲线”&#xff0c;用于分类模型的性能评估。它有助于我们理解和总结分类模型的鲁棒性。为了直观地显示这一点&#xff0c;我们在图中绘制了三条不同的曲线&#xff1a; 一个随机的曲线&#xff08;random&#xff09;通过使用随机森林分类器获得的曲线…

leetcode_828_统计子串中的唯一字符

题意&#xff1a;所有子串中单个字符出现的次数和 问题转化&#xff1a;对于串中的每个字符&#xff0c;只包含其一次的所有子串的个数和 关于求只包含某位置字符一次的子串个数 class Solution { public:int uniqueLetterString(string s) {/* ...A...A...A...*/int n s.size…

【C++】类型转换 ② ( C++ 静态类型转换 static_cast | C 语言隐式转换弊端 | 代码示例 )

文章目录 一、静态类型转换 static_cast1、C 静态类型转换 static_cast2、C 语言隐式转换弊端3、代码示例 在之前写过一篇 C 类型转换的博客 【C 语言】类型转换 ( 转换操作符 | const_cast | static_cast | dynamic_cast | reinterpret_cast | 字符串转换 ) , 简单介绍了 C 类…

linklab phase1 更简单的方法

直接反汇编phase1.o&#xff0c;看eax中是0x21&#xff0c;0x21在数据域中&#xff0c;直接把从第21个字节的内容改为0000000000即可。

【python】--文件/文件夹读写及操作

目录 一、文件读写1、文件读写代码示例 二、文件/文件夹操作1、代码示例 一、文件读写 读写文件就是请求操作系统打开一个文件对象&#xff08;通常称为文件描述符&#xff09;&#xff0c;然后通过操作系统提供的接口从这个文件对象中读取数据&#xff08;读文件&#xff09;…

【如何修改输入法切换键】

操作 以win10为例&#xff0c;点开系统设置&#xff0c;选择时间和语言 选择语言&#xff0c;找到首选语言中的中文&#xff0c;点击选项 点击其中的微软输入法 选择按键 在按键中进行输入法切换按键的选择

Atcoder Beginner Contest 330——A~F题

A - Counting Passes Description Problem Statement N N N people labeled 1 , 2 , … , N 1,2,\dots,N 1,2,…,N took an exam, and person i i i scored A i A_i Ai​ points. Only those who scored at least L L L points pass this exam. Determine how many peopl…

【Linux】第二十一站:文件(一)

文章目录 一、共识原理二、C系列文件接口三、从C过渡到系统&#xff1a;文件系统调用四、访问文件的本质 一、共识原理 文件 内容 属性 文件分为打开的文件 和 没打开的文件 打开的文件&#xff1a;是谁打开的&#xff1f;是进程&#xff01;----所以研究打开的文件本质是研…

预制构件二维码如何生成?

PC预制构件张贴二维码标识牌&#xff0c;可实现预制构建基本信息、设计图纸、安装说明书信息展示微信扫一扫即可查看预制件信息&#xff0c;大大提高施工的精度和效率&#xff1b;同时也可以实现预制生成过程管理、运输过程管理、安装过程管理、后期运维管理实现预制件的过程质…

Typescript基础面试题 | 04.精选 ts 面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Spring Security 6.1.x 系列(6)—— 显式设置和修改登录态

一、前言 此篇是对上篇 Spring Security 6.1.x 系列&#xff08;5&#xff09;—— Servlet 认证体系结构介绍 中4.9章节显式调用SecurityContextRepository#saveContext进行详解分析。 二、设置和修改登录态 2.1 登录态存储形式 使用Spring Security框架&#xff0c;认证成…

快速解决Navicat连接数据库报错:10061

目录 问题原因&#xff1a; 错误提示&#xff1a; 解决方案&#xff1a; 问题1&#xff1a;如何进入指定目录&#xff1f; 问题2&#xff1a;若出现&#xff1a;“服务名无效” 将MySQL注册到win服务中 问题原因&#xff1a; mysql服务没有开启&#xff08;可能会在更新windows…

337. 打家劫舍III (二叉树)

题目 题解 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def rob(self, root: Optional[TreeNode]) ->…

游戏软件提示xinput1_3.dll缺失如何修复呢?6种常用修复方法总结

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“xinput1_3.dll丢失”。这个问题可能会导致游戏无法正常运行。为了解决这个问题&#xff0c;我们需要了解xinput1_3.dll是什么以及如何找回丢失的文件。本文将详细介绍xinput1_3.dll丢失的解…