首页 > 其他分享 >全局事件总线

全局事件总线

时间:2023-04-13 09:25:59浏览次数:27  
标签:... bus 总线 事件 组件 全局

全局事件总线(GlobalEventBus)

  1. 一种组件间通信的方式,适用于任意组件间通信

安装全局事件总线

main.js

new Vue({
    ...
	beforeCreate() {
	    Vue.prototype.$bus = this
	},
	...
})

使用全局事件总线

  1. 接收数据:A组件想要接收数据,则在A组件中给$bus绑定自定义事件,事件的回调在A组件自身
methods:{
    demo(data){...}
},
...
mounted() {
    this.$bus.$on('事件名',this.demo)
}
  1. 提供数据
methods: {
   sendXxx() {
       this.$bus.$emit('事件名', 数据)
   }
}

销毁全局事件总线

最好在beforeDestory钩子中,解绑当前组件所用到的事件。

beforeDestroy() {
    this.$bus.$off('事件名')
}

使用场景

当父子间通信时用props最方便,子给父传用props传递一个函数或者使用自定义事件都可以。
但当父孙之间通信时,需要通过子组件这个媒介,子组件本身是不用这些方法的,所以此时用全局事件总线比较合适。

标签:...,bus,总线,事件,组件,全局
From: https://www.cnblogs.com/cloud0-0/p/17312156.html

相关文章

  • mybatis全局变量 (mybatis.configuration.variables) 的应用
    mybatis.configuration.variables是一个可自定义的全局变量:在application.yml中定义:mybatis:mapper-locations:classpath:mapper/*.xmltype-aliases-package:com.example.entityconfiguration:variables:dbtype:mysqlmapper.xml中的使用:<!--更新......
  • 通过UIApplicationMain实现应用内多种事件拦截
    简介UIApplicationMain大家并不陌生,因为在通过XCode建立iOS的Ojective-C工程时肯定会看到。新建的main.m文件长这样:intmain(intargc,char*argv[]){NSString*appDelegateClassName;@autoreleasepool{appDelegateClassName=NSStringFromClas......
  • 基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意
    ​ 1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置,红色部分就是关于插件的基础自动导入部分,这样就可以将vue和router的相关api全局导入了,importAutoImportfrom"unplugin-auto-import/vite"exportdefaultde......
  • 监听读卡器刷卡事件
    web浏览器使用ic卡或磁卡读卡器自动弹出页面,参考:web浏览器使用ic卡或磁卡读卡器自动弹出页面-HelpYourself!-博客园(cnblogs.com)在页面内单独设置一个input框<el-inputref="myInput"v-model="myInputModel"id="myInput"style="position:fixed;top:-100px;"></el-i......
  • 直播平台软件开发,Android代码模拟触摸、点击及滑动等事件
    直播平台软件开发,Android代码模拟触摸、点击及滑动等事件一、应用中模拟物理和屏幕点击事件 例如,模拟对某个view的点击事件 privatevoidsimulateClick(Viewview,floatx,floaty){  longdownTime=SystemClock.uptimeMillis();  finalMotionEventdownEve......
  • java事件处理机制
     事件源可以是一个键可以是一个鼠标可以是一个按钮.....发生了就是事件源事件就是事件的对象,当事件源发生了就会有事件对象(事件对象就会传递给事件监听者)事件监听者接受刀事件对象了之后会进行事件处理方法   ......
  • 第十一篇 手写原理代码 - 实现事件订阅中类
    javaScript中的订阅发布模式(也称为观察者模式)是一种设计模式,用于在对象之间的事件通信中。该模式由两部分构成:发布者和订阅者。发布者持有所有订阅者的引用,在某个事件发生时通知所有的订阅者,从而触发它们的相应行为。这种模式可以用于解耦发布者和订阅者之间的依赖关系,从而实......
  • OpenAI Translator Bob Plugin Bob for Mac上一款基于ChatGPT全局翻译、润色、语法修
    OpenAITranslatorBobPlugin一款可以在Bob进行即时翻译的插件。它基于OpenAI的GPT系列模型,能够提供高质量、准确的翻译服务。该插件支持多种语言的翻译,包括中文、英文、法语、德语、日语等。用户只需在页面中选中需要翻译的文本,然后点击插件图标即可进行翻译。此外,该插件......
  • 事件与处理程序
    事件程序的调用,在HTML中绑定<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"cont......
  • 钉钉小程序三方企业应用事件与回调
    事件回调订阅事件后,开放平台将会在事件发生时(如:机器人入群)向请求网址推送消息。钉钉三方企业应用事件与回调配置界面如下:推送方式有三种:Http推送(官方不推荐)SyncHttp推送(官方推荐)RDS推送(官方推荐)Http和SyncHttp没有太大的区别,按钉钉的说法是:与HTTP推送方式比,SyncHTTP......