手把手学习Vue3.0：Vue3.0正确使用Bus总线mitt实现组件间通信和传参

最新推荐文章于 2024-05-16 21:01:58 发布
最新推荐文章于 2024-05-16 21:01:58 发布
阅读量6.1k 收藏 8
点赞数 5
分类专栏： 手把手学习Vue3.0 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shishuai4206/article/details/114658624
版权

背景

在使用Vue做后台管理系统的过程中，需要实现组件间的参数传递。Bus方式非常简洁方便，却遇到一个奇怪的现象，我单击菜单区域，需要在header中展示操作导航，内容区域做展示。结果header区域没有反应。下面我分别介绍Vue3.0如何集成Bus，同时复盘一下问题的整个过程。

Vue3.0集成Bus 

  • Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线。
  • 使用emit来注册，emitt("type","event");，可以先这样理解：第一个参数可以理解成事件名称，第二个参数通常是参数。
  • 使用on来监听，on("type",“handler”=>{这里是具体操作逻辑});第一个参数同上的第一个参数要对应上，才说明一个事件。
  • emitt和on是成对出现，一个发起，一个接收。
  • 2.0之前是$emitt，$on，3.0去掉了$，后面给出例子
  • 接收方可以是多个组件，只要第一个参数匹配都可以获取到想要的数据，这样确实很方便，也是Vue的一个优势。

方式一：全局引入

  • 首先安装mitt
cnpm install --save mitt
  • 在main.js中引入

                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  帅哥趣谈
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    5
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    8
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  8
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
vue3 - 18.eventBus兄弟组件传参传值

				
			

			

				

					qq_34111842的博客
				

				

					10-23
					
					964
					
				

			

		

		

			
				
eventBus：原理是利用js的发布订阅，通过事件调度中心处理。1. 通过父组件作为一个桥梁进行两个平级关系的组件相互传参。我们封装一个eventBus。以下方法不推荐使用！

			
		

	



                

              
                



	

		

			

				
					
mini-vue3.0:vue-next vue2.x vue3.0源码学习

				
			

			

				

					03-23
				

			

		

		

			
				
一个极简版本的vue3.0核心学习库，通过学习vue3.0核心实现逻辑，从而快速掌握vue3.0核心原理。当别人还在蹒跚学步，你已健步如飞。 写在前面，作为一个有追求的前端工程师，我们当然不满足于vue API调用工程师。需要...

			
		

	



                


  
              

                


	

		

			

				
					
Vue3中使用事件总线Bus的两种方式（mitt）

				
			

			

				

					LLL3189860667的博客
				

				

					08-01
					
					2504
					
				

			

		

		

			
				
接下来介绍Vue3中通过mitt使用事件总线Bus的两种方式。

			
		

	





	

		

			

				
					
详细分析Vue3中的emit用法（子传父）

					
最新发布

				
			

			

				

					码农研究僧的博客
				

				

					05-16
					
					5266
					
				

			

		

		

			
				
在 Vue 3 中，emit 是一种机制，用于在子组件中触发事件，并在父组件中监听这些事件

提供一种组件间通信的方式，尤其是在处理父子组件数据传递和交互时非常有用

			
		

	



		

			
		



	

		

			

				
					
vue3.0项目中使用mitt进行组件传值

					
热门推荐

				
			

			

				

					Jeasu_0908的博客
				

				

					04-15
					
					1万+
					
				

			

		

		

			
				
vue3.0项目中使用mitt进行组件传值

			
		

	





	

		

			

				
					
Vue3.0总线程bus.js使用（mitt）

				
			

			

				

					风口浪尖的猪吖
				

				

					05-06
					
					1649
					
				

			

		

		

			
				
vue 3.0 移除了 on，on，on，off 和 once方法，once 方法，once方法，emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序.那么我们该如何处理简单的兄弟组件间的数据传输呢！
官方推荐使用的第三方库：mitt
1.引入
npm install --save mitt

2.创建bus.js并写入一下代码（建议存放在与main同一目录）
import mitt from "mitt";
const bus = {};
const emitter 

			
		

	





	

		

			

				
					
vue3.0中使用bus总线

				
			

			

				

					weixin_49203377的博客
				

				

					05-13
					
					1万+
					
				

			

		

		

			
				
背景
在使用vue3.0做后台管理系统的过程中，需要实现兄弟组件间的通信，一个组件触发事件，另一个组件接收到事件后执行某操作
Vue3.0集成Bus

Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线
Vue3.0中使用emit来注册 bus.emit(‘事件’,参数)
Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 })
emit和on是成对出现的，一个发起，一个接收

			
		

	





	

		

			

				
					
Vue3兄弟组件 互相传参 bus

				
			

			

				

					weixin_43208652的博客
				

				

					03-07
					
					369
					
				

			

		

		

			
				
Vue3 兄弟组件传参

			
		

	





	

		

			

				
					
vue3.0:vue3.0集训

				
			

			

				

					05-28
				

			

		

		

			
				
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue 3.0 是 Vue 的一个重大升级，引入了许多新...文件名"vue3.0-main"可能是项目主文件或包含主要源代码的文件夹，这将是学习和研究Vue 3.0实现的起点。

			
		

	





	

		

			

				
					
Vue2.X和Vue3.0数据响应原理变化的区别

				
			

			

				

					10-16
				

			

		

		

			
				
Vue2.x和Vue3.0在数据响应原理上有显著的区别，主要体现在对象属性的监听方式上。  在Vue2.x中，数据响应性是通过`Object.defineProperty()`来实现的。这个内置方法可以修改对象的属性描述符，包括访问器属性...

			
		

	





	

		

			

				
					
基于Vue 3.0的layui-vue桌面端组件库设计源码

				
			

			

				

					04-11
				

			

		

		

			
				
本源码提供了一个基于Vue 3.0的layui-vue桌面端组件库设计。项目包含880个文件，其中包括341个Vue文件、265个TypeScript文件、96个Markdown文档、80个Less样式文件、17个JSON文件、16个SVG图像、10个CSS文件、8个...

			
		

	





	

		

			

				
					
vue3.0父子组件数据交互

				
			

			

				

					06-11
				

			

		

		

			
				
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...

			
		

	





	

		

			

				
					
vue3中（兄弟父子传参）Bus详解和使用Mitt

				
			

			

				

					weixin_44166849的博客
				

				

					05-04
					
					513
					
				

			

		

		

			
				
vue3中（兄弟父子传参）Bus详解和使用Mitt

			
		

	





	

		

			

				
					
vue3.0之Bus总线的实现

				
			

			

				

					weixin_43845137的博客
				

				

					03-13
					
					1824
					
				

			

		

		

			
				
目录vue3.0之Bus总线的实现Bus.tsmain.vue 根组件B.vueC.vue
vue3.0之Bus总线的实现
Bus.ts

项目根目录下创建 Bus.ts文件

type BusClass<T> = {
  emit:(name:T) => void
  on:(name:T,callback:Function) => void
}
type BusParams = string | number | symbol
type List = {
  [key:BusPa

			
		

	





	

		

			

				
					
vue中bus的用法

				
			

			

				

					weixin_45646663的博客
				

				

					04-26
					
					494
					
				

			

		

		

			
				
1，引入bus文件
import Bus from ‘@/assets/script/bus’
2，bus.js里面的代码
import Vue from 'vue'
var bus = new Vue()
export default bus

3，在需要走获取数据的地方，触发
Bus.$emit('saveLog');

4，在其他地方接收到，来执行
Bus.$on('saveLog', function () {
        this.$_get_logDetail();  //这是某个获取数据的

			
		

	





	

		

			

				
					
bus总线的原理解析

				
			

			

				

					哆来A梦没有口袋的博客
				

				

					04-06
					
					2709
					
				

			

		

		

			
				
非父子组件间传递数据有很多种方式，本文从官方文档开始解析bus总线的原理



1.关于官方介绍从 Vue 1.x 迁移 — Vue.js





在官方文档中对bus总线的介绍是使用，但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值，bus总线应用在简单的项目



1.怎么理解bus总线

bus总线就是一个中间组件,触发事件，触发中间组件，监听中间组件的变化





2.bus组件存在的条件和注册


1.所有组件都可以访问
2.可以使用$emit,$on,$off

在项...

			
		

	





	

		

			

				
					
Vue-中央事件总线（bus）

				
			

			

				

					qq_56973906的博客
				

				

					09-09
					
					3413
					
				

			

		

		

			
				
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。//1.触发x组件的a事件: x.$emit("a事件",参数...)//2.给x组件绑定a事件 x.$on("a事件",监听器函数)

			
		

	





	

		

			

				
					
vue3.0-mitt及新增全局变量应用

				
			

			

				

					qq_42844731的博客
				

				

					12-28
					
					540
					
				

			

		

		

			
				
1, yarn add mitt

2, 局部倒入或者全局倒入(3.0的globalProperties类)





emit接收, on监听.
* 特别注意: ctx方式并不能在服务器上被识别,所以上线务必运用proxy, 具体用法如图






			
		

	





	

		

			

				
					
vue项目 全局传值Bus总线

				
			

			

				

					weixin_43589225的博客
				

				

					07-05
					
					1723
					
				

			

		

		

			
				
在vue项目中我们常常需要传值，但是有时候需要传值的组件并不是父子组件，哪怎么办呢？
那就需要我们今天的主角 Bus vuex



			
		

	





	

		

			

				
					
vue3.0如何使用bus总线传值

				
			

			

				

					09-10
				

			

		

		

			
				
### 回答1：

Vue3.0可以使用Vue.observable来实现bus总线传值，可以在不同组件之间共享状态。具体使用方法可以参考Vue官方文档：https://vuejs.org/v2/guide/migration-observable.html  

### 回答2：
在Vue 3.0中使用事件总线（bus）传值，可以通过创建一个vue实例作为中央事件总线来实现。首先，需要在Vue应用的入口文件中创建这个中央事件总线，可以命名为`bus.js`：

```javascript
import { createApp } from 'vue'

const app = createApp({})
const bus = app.config.globalProperties.$bus = app._bus = new app()

export default bus
```

然后，在你想要传值的组件中，可以通过`$emit`方法触发自定义事件，并将数据作为参数传递：

```vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { defineComponent } from 'vue'
import bus from './bus.js'

export default defineComponent({
  methods: {
    sendMessage() {
      bus.$emit('message', 'Hello, World!')
    }
  }
})
</script>
```

将数据发送到中央事件总线后，其他需要接收数据的组件可以使用`$on`方法来监听自定义事件，并在回调函数中获取传递的值：

```vue
<template>
  <div>{{ receivedMessage }}</div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import bus from './bus.js'

export default defineComponent({
  setup() {
    const receivedMessage = ref('')

    onMounted(() => {
      bus.$on('message', (message) => {
        receivedMessage.value = message
      })
    })

    return {
      receivedMessage
    }
  }
})
</script>
```

这样，当发送消息的组件点击按钮时，接收消息的组件会更新其中的`receivedMessage`数据，从而实现了在Vue 3.0中使用中央事件总线传值的功能。  

### 回答3：
在Vue 3.0中，我们可以使用事件总线（event bus）来实现组件之间的通信并传值。下面是使用事件总线传值的步骤：

步骤1：创建一个事件总线对象
在一个独立的JavaScript文件中，创建一个Vue实例作为事件总线对象：
```javascript
// eventBus.js
import { createApp } from 'vue'
export const eventBus = createApp({})
```

步骤2：在需要传值的组件中引入事件总线
在需要传值的组件中，引入事件总线对象：
```javascript
import { eventBus } from './eventBus.js'
```

步骤3：在发送方组件中发送事件
在发送方组件中，通过事件总线对象发送一个事件，并传递需要传的值：
```javascript
eventBus.config.globalProperties.$emit('eventName', value)
```
其中'eventName'是自定义的事件名，value是需要传递的值。

步骤4：在接收方组件中接收事件
在接收方组件中，通过事件总线对象监听事件，获取传递的值：
```javascript
eventBus.config.globalProperties.$on('eventName', (value) => {
  // 接收到传递的值
})
```
在事件回调函数中，可以通过参数获取到传递的值。

步骤5：注销事件监听（可选）
在接收方组件销毁前，可以通过eventBus对象的$off方法注销事件监听：
```javascript
eventBus.config.globalProperties.$off('eventName')
```

通过以上步骤，我们就可以在Vue 3.0中使用事件总线（event bus）来实现组件之间的通信和值的传递。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 8

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
帅哥趣谈

			
请帅哥抽根烟

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值