Vue中bus传值的理解

「爱情、让人受尽委屈。」 2023-06-27 08:51 3阅读 0赞

说起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文件所触发的钩子函数如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200105212011490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70