首页 > 其他分享 >Vue3中Mitt的使用

Vue3中Mitt的使用

时间:2023-03-30 15:33:35浏览次数:42  
标签:Vue bus Mitt Vue3 js 使用 eventData mitt

Vue中使用Mitt

Mitt是一个在Vue.js应用程序中使用的小型事件总线库。该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props。

Mitt的特性和功能介绍

  • 轻量级: Mitt只有200字节大小,不会增加你的应用程序的负担
  • 方便易用:只需要引入mitt并配置即可使用
  • 支持任何Javascript环境:Mitt支持在任何Javascript环境下使用,不仅限于Vue
  • 应用场景:组件通信

引入Mitt

安装依赖

执行安装命令

npm install --save mitt

在src目录下面,新建/libs/bus.js,内容如下:

// 事件总线第三方库:
    import mitt from 'mitt'

    const bus = mitt()
    export default bus

使用

    import bus from '@/libs/bus.js'

    //in component A 触发
    bus.emit('event-name', eventData)

    //in component B 监听
    bus.on('event-name', eventData => { /* do something with eventData */ })

标签:Vue,bus,Mitt,Vue3,js,使用,eventData,mitt
From: https://www.cnblogs.com/GardenofEden/p/17272922.html

相关文章

  • 网络安全-Burp Suite安装和使用方法
    一、安装准备1、安装jdkjdk是必须有的,装jdk的过程就不说了,上官网下载,配置环境变量,java-version,如下:我电脑装了jdk8和JDK17,可能会出现jdk版本过高需要安装jdk8的情况,可......
  • 【Python】函数的可变参数 *args 和 **kwargs的使用
    可变参数*args和**kwargs*args和**kwargs主要用于定义函数的可变参数,*args和**kwargs组合起来可以传入任意的参数。(注意:参数*args必须在**kwargs之前定义)*arg......
  • VUE3基础笔记
    date:2023-3-3010:00:00categories:-前端系列tags:-VUEtitle:VUE3基础笔记视频地址:2022最新Vue零基础小白入门教程,从入门到精通,快速上手简单易懂_哔哩哔哩_b......
  • Zabbix监控使用ping判断主机是否存活并发邮件报警
    一、在Zabbix服务器安装gcc和fpingyum-yinstallgccwgethttp://www.fping.org/dist/fping-3.10.tar.gztar-xffping-3.10.tar.gzcdfping-3.10./configure--prefix......
  • 【0基础学爬虫】爬虫基础之网页解析库的使用
    大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易......
  • Media Query 在 CSS 中使用的一个具体例子
    在CSS中,MediaQuery是一种用于指定不同屏幕尺寸和设备类型的样式表的技术。如下图所示:alland(max-width:360px)是一个MediaQuery表达式,它指定了一个条件,只有在......
  • 使用蓝牙自动解锁或锁定win11
    蓝牙配对你的手机,安卓或者苹果都可以。当你手机离开一定距离后电脑将自动锁定。......
  • 使用Promise改造封装好的AJAX
    使用Promise改造封装好的AJAX修改index.jsimportAjaxfrom'ajax.js';import{ERROR_ABOUT}from'./封装AJAX4';import{ERROR_TIMEOUT}from'./封装AJAX4';i......
  • Xshell 7 提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
    平平无奇的一天,想同步一下本地和服务器的程序。博主一般采用的同步文件的方法是通过xshell先连接服务器,再通过xftp同步文件。突然,今天打开xshell的时候,报出问题需要更新到......
  • winform串口控件serialPort1的使用
    serialPort1控件使用的关键点主要有三:1、配置串口号2、配置数据接收事件3、打开串口关键代码如下:1privatevoidForm1_Load(objectsender,EventArgse)2{3......