Vue兄弟组件通信之借助中央事件总线

下载链接:https://www.yinxiangit.com

其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——>子;

在这里呢,就不对这种方式进行赘述,下面给大家介绍——借助中央事件总线。

第一步:

在  组件文件夹中,创建一个js文件,这里将其命名为“bus,js”,在里面写入如下代码:

    import Vue from 'vue';
    const Bus = new Vue();
    export default Bus;

第二步:

假如组件a.vue  和  组件b.vue是兄弟组件,那么分别在两个.vue文件里,引入bus.js,写法如下:

    import Bus from './bus.js'

引入的具体路径按照实际的项目写,这里bus.js是和.vue文件同级。

第三步:

假如我们要实现a.vue传值给b.vue,则在a.vue中,恰当的地方,比如某事件触发后,或者mounted之类的生命周期中都行,写入:

Bus.$emit("事件名",要传的数据);

第四步:

在b.vue的mounted中写入:

Bus.$on('事件名',res=>{
	console.log(res)//传过来的数据
})

传过来的数据可以是一个变量,也可以是一个对象、数据。

Vue兄弟组件通信的更多相关文章

  1. Vue 兄弟组件通信(不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  2. 关于Vue 兄弟组件通信

    最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作.  意思就是 router-view指向的router来影响Header组件的信息 首 ...

  3. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  4. vue之组件通信

    vue组件通信一般分为以下几种情况: 1.父子组件通信: 2.兄弟组件通信: 3.跨多层级组件通信: 一.父子通信        父组件通过props传递数据给子组件,子组件通过emit发送事件传递数 ...

  5. vue兄弟组件的传值eventbus

    注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从 ...

  6. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  7. vue兄弟组件传值$on多次执行的问题

    首先附上如何进行兄弟组件通信的方法链接 https://segmentfault.com/a/1190000011882494 下面是$on多次执行的解决办法 https://blog.csdn.ne ...

  8. Vue 兄弟组件之间传递数值

    Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...

  9. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

随机推荐

  1. (转)SqlServer 数据库同步的两种方式 (发布、订阅),主从数据库之间的同步

    最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...

  2. 【Hibernate框架】flush机制

    背景: 一个偶然的机会,我做了一个例子,中间我遇到了一个有意思的问题,就是在执行commit方法之前,做了两次save操作,如下: SessionFactory sf = new Configurat ...

  3. 我们应该如何去了解JavaScript引擎的工作原理

    “读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...

  4. C# 两个集合对比获取不同

    public class CompareCollection { public List<string> CompareList(List<string> oldList, L ...

  5. VGA DVI HDMI区别

    VGA,DVI,HDMI是目前常用的3种不同显示接口的名称.在树莓派的边缘既有HDMI的接口,也有RCA的接口,而显示器上也是既有DVI,又有VGA.上个月买连接线,没有仔细检查买了一根HDMI对VG ...

  6. hdu 2999 Stone Game, Why are you always there? 博弈论

    SG函数应用!! 代码如下: #include<cstdio> #include<cstring> #include<iostream> #include<c ...

  7. Android Studio更新失败

    解决方案: Windows平台下 如果是运行的Android studio是32位的需要在修改一下文件: 在andriod studio的启动目录下.找到studio.exe.vmoptions这个文 ...

  8. ATR的基本结构与意义(无历史字符部分)

    Reset 3B FA 13 00 00 81 31 FE 45 4A 43 4F 50 34 31 56 32 32 31 96 复位应答 ATR TS( The Initial character ...

  9. Top k问题(线性时间选择算法)

    问题描述:给定n个整数,求其中第k小的数. 分析:显然,对所有的数据进行排序,即很容易找到第k小的数.但是排序的时间复杂度较高,很难达到线性时间,哈希排序可以实现,但是需要另外的辅助空间. 这里我提供 ...

  10. STL--sort源码分析

    SGI STL sort源码 temlate <class RandowAccessIterator> inline void sort(RandowAccessIterator firs ...