Vue中bus传值的理解

2022-08-22 14:01:45 阅读：121 来源： 互联网

说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。

简单描述
在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。

使用方式
在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：

1）建立bus.js文件

在文件夹下建立bus.js文件，写入以下代码：

// bus.js
import Vue from 'vue'
export default new Vue()

2）a.vue中添加代码

// 引入公共的bus，来做为中间传达的工具
import Bus from '../../api/bus'

beforeDestroy(){
   Bus.$emit('val', 要传递的值)
   console.log('我发送成功了');      
},

3）b.vue中添加代码

import Bus from '../../api/bus'
		
created(){
   // 用$on事件来接收参数
   Bus.$on('val', (data) => {
     console.log(data)  
   })
}

注意点

为什么a文件是在beforeDestroy中传值，b文件是在created中接受值呢？这块就涉及到了页面创建与销毁时调用的钩子函数了。a文件跳转b文件所触发的钩子函数如下：

因为在a文件执行beforeDestroy的时候，b文件已经执行了created方法了，这个时候传值是可以传过去的，如果b文件使用mounted方法接受，这个时候a文件第一次给b文件传值，b文件是接受不到的，第二次传的时候才能接收到。

原文链接：https://blog.csdn.net/m0_37508531/article/details/103847541

标签：文件,vue,..,bus,Vue,传值
来源： https://www.cnblogs.com/lylweb/p/16612575.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue中bus传值的理解

1）建立bus.js文件

2）a.vue中添加代码

3）b.vue中添加代码

注意点