首页 > 其他分享 >vue3+ts使用bus事件总线

vue3+ts使用bus事件总线

时间:2022-08-24 08:33:18浏览次数:66  
标签:bus mitt vueBus ts vue3 any

1、在vue2中我是这样使用的

//创建一个vueBus.js
import Bus from 'vue';
let install = function (Vue) {
Vue.prototype.$bus = new Bus()
}

export default {
install
};

//在main.js中引入
import vueBus from '@/utils/vueBus';
Vue.use(vueBus);
//可根据this.$bus._events['事件名'] 来查看是否存在该事件监听

 

2、在vue3中使用

 

//在vue3中需要使用mitt插件,直接下载即可
//创建vueBus.ts文件
const init_mitt = mitt()
const emitter:any = {
_events:{},
$emit:init_mitt.emit,
$on:function(t:any,e:any){
this._events[t] = true
init_mitt.on(t,e)
},
$off:function(t:any,e:any){
delete this._events[t]
init_mitt.off(t,e)
}
}
export default emitter

//在main.ts中引入使用
import emitter from '@/utils/vueBus';
app.config.globalProperties.$bus = emitter

//如果需要挂在其他的全局变量上,需要到声明文件声明

标签:bus,mitt,vueBus,ts,vue3,any
From: https://www.cnblogs.com/zhyp/p/16618527.html

相关文章

  • [Typescript] ts-expect-error
    Insomeways //@ts-expect-error canactasasuppressioncomment,similarto //@ts-ignore.Thedifferenceisthat //@ts-ignore willdonothingifthef......
  • vue3 学习-初识体验-组件 component
    组件可以简单理解为"页面构成的一部分".组件化是Vue最为重要的设计理念之一吧.早期的前端页面基本上就拆分为一个个的html,css,js文件,然后不断"堆砌",一套js库......
  • VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统(四)
    在B/S系统开发中,前后端分离开发设计已成为一种标准,而VUE作为前端三大主流框架之一,越来越受到大家的青睐,Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.netWebA......
  • 标准IO-fgets-gets
    fgetsfputs......
  • websockets html5 全双工通信
    常见传输协议 不够全面会陆续补充协议链接面向默认端口备注HTTPTCP链接网页80超文本传输协议FTPTCP链接文件21文件传输协议WebSocketsTCP链......
  • 限制NFS访问,设置hosts.allow和hostsdeny
     限制NFS访问,设置hosts.allow和hostsdeny配置优先级说明:linux系统会先检查/etc/hosts.deny规则,再检查/etc/hosts.allow规则,如果有冲突......
  • Vue3.2 setup语法糖中组件的 name 属性如何定义
    方案一:增加一个脚本标签<scriptlang="ts">exportdefault{name:'Layout'}</script>方案二:使用插件unplugin-vue-define-options 方案三:(推荐)使用插件vit......
  • Python3项目初始化8-->css和bootstrap入门学习
    24、CSS基础HTML盒模型divspanCSS选择器,常见属性值Bootstrap栅格系统,表单,表格,常用组件。Div一个盒子,默认站一行Span行内元素P段落元素为什么需要div?t......
  • STS用Maven写一个登录页面
    上一章我们写了一个HelloWorld,这一章在此基础上写出一个登录页面。 一、当前目录结构为:  之所以运行后出现HelloWord的页面,是因为server启动时会默认执行index.jsp......
  • 如何通过Modbus 485转Profinet网关将变频器数据接入PLC中
    Modbus485转Profinet网关配置方法:打开博图,新建项目并添加GSD文件。 建立Profinet连接,设定Modbus485转Profinet网关的IP地址和设备名称,IP要和Modbus485转Profinet网......