【Vue全局事件总线详解】

news2025/2/24 6:22:31

Vue全局事件总线详解

  • Vue全局事件总线详解
    • 简介
    • 原理
      • 一、满足所有组件都能访问得到全局事件总线
      • 二、可以调用 `$on` ,和 `$off ` 和 `$emit`
    • 实现全局事件总线
      • 完整实例代码
    • 总结


Vue全局事件总线详解

简介

全局事件总线是一种组件间通信的方式,适用于任意组件间通信

全局事件总线并不是插件,配置文件等等,事件总线是程序员在做Vue开发中总结积累的一套方法,是一套规则,只要满足这套规则,就可以实现组件间的通信。


原理

在这里插入图片描述
结合上图,假若C组件想要传递数据给A组件,那么,就通过全局事件总线在A组件中绑定一个自定义事件,并界定一个参数来接收传递的数据,同样在C组件中,就需要通过全局事件总线对自定义事件进行触发,并传递参数

简单理解,全局事件总线其实就是一个中间介质,组件间的相互通信借助于这个中间介质,通过这个中间转换介质,从而完成数据的传递与接收,实现组件间的相互通信

全局事件总线是一个独立存在的部分,要想实现组件间的相互通信,又是自定义事件,那就要满足两个条件

一、满足所有组件都能访问得到全局事件总线

既然要能让所有的组件都能访问得到全局事件总线,那么创建的思路就是,全局事件总线一定要让VC或者VM访问得到。

结合组件的内置关系:

VueComponent.prototype.proto === Vue.prototype

这个关系在作用就在于可以让 组件实例对象(vc) 可以访问到Vue原型上的属性和方法

二、可以调用 $on ,和 $off $emit

因为 $on ,和 $off$emit 这三个方法在Vue原型对象上,所以,我们的全局事件总线就要放在Vue的原型对象(vue.prototype)上,以确保每个组件都能访问得到


实现全局事件总线

首先,想要实现全局事件总线,就要安装全局事件总线,在main.js中完成全局事件总线的安装配置

main.js:

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析,且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

接下来,我们就要对想要接收到数据的组件进行自定义事件的绑定,简单来说就是,谁要接收数据,自定义事件就绑定在谁身上

绑定全局事件总线
TestB.vue:

mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件,收到了数据', 接收参数);
  })
}

最后一步,全局事件总线的触发,事件的触发是在发送数据的组件中完成的,简单来说,谁是数据的发送者,谁就来触发事件

触发全局事件总线
TestA.vue:

 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},

完整实例代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//关闭Vue的生产提示
Vue.config.productionTip = false


//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析,且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

TestA.vue:

<template>
  <div>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="sendName">给TestB组件传递数据</button>
  </div>
</template>

<script>
    export default {
        name:'TestA',
        data(){
          return{
            name:'路飞',
            age:18
          }
        },
        methods:{
          // 触发事件,事件名不能重复
          sendName(){
            this.$bus.$emit('lufei', this.name);
          }
        },
    }
</script>

<style scoped>
div{
  background-color: rgb(127, 229, 255);
}
</style>

TetsB.vue:

<template>
  <div>
    <h2>籍贯:{{native}}</h2>
    <h2>家庭住址:{{adress}}</h2>
  </div>
</template>

<script>
    export default {
        name:'TestB',
        data(){
          return{
            native:'东海',
            adress:'东海风车村',
          }
        },
        mounted(){
          // 绑定事件
          this.$bus.$on('lufei', (data)=>{
            console.log('我是TestB组件,收到了数据', data);
          })
        },
        // 销毁对应自定义事件
        beforeDestroy(){
          this.$bus.$off('lufei')
        }
    }
</script>

<style scoped>
div{
  background-color: aquamarine;
}
</style>

数据传递前:
在这里插入图片描述

点击按钮触发全局事件总线后:
在这里插入图片描述
此时,数据已经传递到了TestB.vue组件中

最后:
在得到数据之后,解绑事件,提高性能

// 销毁对应自定义事件
beforeDestroy(){
  this.$bus.$off('自定义事件名')
}

到此,一个简单的全局事件总线就完成了,相信大家现在对全局事件总线也有一定的理解了,在日常开发中,就可以根据业务类型以及要求使用全局事件总线了。

接下来我简单修改代码片段,接收的数据将会呈现在页面上

TestB.vue中:
data中在添加一个属性用于接收传递的数据
在这里插入图片描述


在接收参数时赋值给data中新添的属性
在这里插入图片描述


利用插值语法将接收的数据展示在页面中
在这里插入图片描述

页面效果

全局事件触发前:
在这里插入图片描述

全局事件触发后:
在这里插入图片描述


总结

全局事件总线实现了任意组件间的通信,有效简化了开发过程中一些数据传递的操作,同时也提高了程序的性能,但是值得注意的是,全局事件总线之所以叫全局,是因为任何组件都可以访问,这就导致如果大量组件都绑定了全局事件总线,难免会造成代码混乱,且自定义事件名可能发生重复的问题,所以在开发中,使用全局事件总线时要根据实际业务情况进行选择

在这里插入图片描述

创作不易,记得点赞收藏加关注再走~~~~

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

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

相关文章

1.启动前端项目(命令行)

1、从github或其他地方获得的前端项目&#xff0c;想要看效果 1.用管理员身份运行命令提示符&#xff08;windows的控制后台&#xff09; 2.进入前端项目安装的文件夹&#xff08;这是我的文件夹&#xff09; 3.在命令行中输入&#xff1a;npm install 4.在命令行中输入&am…

Vben Admin框架 table的使用以及相关的内容

Vben Admin框架 table的使用以及相关的内容 一、table的使用基础示例&#xff1a; Vben Admin官网链接: 官网组件页链接 这是我使用此框架的用法&#xff0c;仅供参考&#xff0c;我是vue3项目中使用此框架&#xff0c;写法是vue3的写法 第一步 引入BasicTable 组件。 // r…

【Web前端】一文带你吃透HTML(上篇)

前端学习路线小总结: 基础入门:HTML CSS JavaScript三大主流框架:VUE REACT Angular深入学习:小程序 Node jQuery TypeScript 前端工程化🍁开始前端之旅吧! 一.HTML简介1.什么是HTML?2.HTML 标签3.HTML 元素4.HTML版本5.Web 浏览器<

Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

错误描述 最近在封装Vue模块时&#xff0c;借助Vue的Computed属性监听传递的数据&#xff0c;但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter 错误。控制台报错如下&#xff1a; 错误分析 根据控制台错误提示&#xff0c;组件中定义…

如何给网页添加icon图标?

做一些小页面或者项目的时候&#xff0c;我们会发现每个网站都有自己的小图标&#xff0c;下面我就告诉你怎么弄这个&#xff0c;超简单的&#xff01;&#x1f49c;&#x1f49c; 网站添加icon小图标网页图标favicon.ico小简介1.添加网站已有icon图标2.自定义icon图标网页图标…

VUE——使用VUE脚手架创建项目

前言 vue脚手架工具&#xff0c;对vue项目构造做了封装&#xff0c;直接使用vue-cli创建项目&#xff0c;常用配置自动帮你完成&#xff0c;不用自己像使用webpack一样配置。 目录 1、安装 npm i vue 2、创建vue项目 3、运行项目 1、安装 npm i vue ps:项目化开发中&…

前端加密,后端解密的过程及代码(密码明文传输解决,不是太保险。key在前端有显示)

在工作中经常遇到密码明文传输这个问题&#xff0c;为了让密码安全些会让加密&#xff0c;现在有个比较方便的AES加密分享给大家&#xff0c;话不多说&#xff0c;上代码 1&#xff0c;首先引入前端需要用到的js&#xff1a;crypto-js&#xff0c;下载命令 npm install cryp…

vue中computed和watch的使用场景

一、computed computed擅长处理的场景&#xff1a;一个数据受多个数据影响&#xff0c;如果一个属性是由其他属性计算而来的&#xff0c;这个属性依赖其他属性是一个多对一或者一对一&#xff0c;一般用computed&#xff1b; 如果 computed 属性值是函数&#xff0c;那么默认会…

uni-app,vue3接口请求封装

uni-app接口&#xff0c;全局方法封装 1.在根目录创建一个api文件&#xff0c;在api文件夹中创建api.js&#xff0c;baseUrl.js和http.js文件 2. baseUrl.js文件代码 export default "https://XXXX.test03.qcw800.com/api/" 3.http.js文件代码 export function h…

【微信小程序】运行机制和更新机制

&#x1f352;观众老爷们好呀&#xff0c;牛牛又更文了&#xff0c;上文我们对部分比较常用的组件进行了讲解&#xff0c;作为开发者&#xff0c;我们还需要对小程序的运行机制和更新机制做一定的了解&#xff0c;那问题来了&#xff0c;你对它们了解多少呢&#xff1f; &#…

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

自定义微信小程序头部导航栏 自定义微信小程序头部导航栏&#xff0c;有几种方式 方式一 {"navigationStyle": "custom" // 将navigationStyle从默认default改为custom }定义此方法后&#xff0c;头部的导航栏会去掉&#xff0c;导航栏下的元素会直接向上…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因

启动项目时&#xff0c;本地有node包&#xff0c;但是终端提示&#xff1a;vue-cli-service 不是内部或外部命令&#xff0c;也不是可运行的程序&#xff0c;导致项目无法启动&#xff0c;如下&#xff1a; 原因之一是项目的npm版本较低&#xff0c;但是你本地的npm版本过高&am…

uniapp一键发行代码并混淆代码

第一步.在项目根目录下安装插件 npm install javascript-obfuscator -g安装完成后&#xff0c;javascript-obfuscator就是一个独立的可执行命令了。 javascript-obfuscator -v第二步&#xff1a;HbuilderX点击发行按钮&#xff0c;打包代码到dist文件中 小程序发行后代码会自…

微信小程序--》小程序—全局数据共享和分包

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…

Code For Better 谷歌开发者之声—— 在 Windows 10 上对 Google Chrome 进行故障排除

&#x1f482; 个人网站:【 海拥】【小霸王游戏机】&#x1f91f; 风趣幽默的前端学习课程&#xff1a;&#x1f449;28个案例趣学前端&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&…

小白也可以,10分钟搭建大气的Halo博客(保姆级教程)

一、博客的好处 很多程序员、职业投资人、KOL喜欢建立自己的博客系统&#xff0c;为的是让自己有一个知识归纳的工具&#xff0c;也为自己收纳的各种资料有一个线上存储的记事本。到了币圈后&#xff0c;虽然有很多人用Mirro、Medium等文字工具&#xff0c;但这些工具对于中国…

完美解决:flex布局中设置宽度被压缩的问题

问题描述&#xff1a; 在父级中设置了display:flex;父元素宽度不够的时候&#xff0c;子元素就算设置的宽度&#xff0c;也会被压缩&#xff1b; 产生原因&#xff1a; 当子元素设置固定宽度&#xff0c;如果整体宽度不足时&#xff0c;会把固定宽度给压缩 解决方法: 给固定宽…

uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

前言 在开发一款公司的小程序过程中&#xff0c;有一个需求&#xff1a;web端后端可以上传word文档&#xff0c;后端转为html字符串&#xff1b;小程序接收显示&#xff0c;并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用&#xff0c;所以这次…

【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f9e7; 个人社区&#xff1…

Vue2-生命周期

之前说完了Vue的基础知识&#xff0c;说了语法、数据代理、数据监听、计算属性、指令、过滤器等等&#xff0c;但是没有涉及到Vue的声明周期&#xff0c;其实之所以把生命周期放在后面讲&#xff0c;是因为&#xff0c;如果最开始讲生命周期&#xff0c;里面涉及到的概念性东西…