说起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文件是接受不到的,第二次传的时候才能接收到。

Logo

前往低代码交流专区

更多推荐