兄弟组件之间进行传值(非父子组件);


安装:npm install vue-bus


在main.js中引入vue-bus


import Vue from 'vue';
import VueBus from 'vue-bus'; Vue.use(VueBus);

在组件中使用:


A组件触发事件:

this.$bus.emit("parameterName",params);


B组件接收事件:

this.$bus.on("parameterName",function(value){

  console.log(value)
});
 

组件销毁时解除事件绑定:

destroyed:function(){

  this.$bus.off("parameterName")

}

 
 

vue 里bus的使用的更多相关文章

  1. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  2. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  3. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  4. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  5. this.$refs.tabs.activeKey ref就是vue里面的id

    this.$refs.tabs.activeKey ref就是vue里面的id

  6. 深入解析Vue里函数的调用顺序介绍

    今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...

  7. React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  8. js里的发布订阅模式及vue里的事件订阅实现

    发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...

  9. vue里如何灵活的绑定class以及内联style

    在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢 1.最简单一个class绑定 v-bind:class设置一个对象,可以动态地切换 ...

随机推荐

  1. mit-6.828 Lab01:Booting a PC Part2 理论知识

    Part 2 目录 Part 2 学习理论知识 反汇编 扇区 BIOS 启动过程总结 Boot loader启动过程总结 A20 gate 读boot/boot.S 和 boot/boot.c源码 - ...

  2. 你该知道的Docker-compose

    Docker-compose介绍 前几篇文章和小伙伴们,分享了使用Dockerfile来构建镜像,使用docker run等命令来手动启动镜像.docker stop停止镜像.docker kill杀 ...

  3. 正确的使用HttpClient

    快捷的网络请求,多用HttpClient 但是常规的写法会一大片的TIME_OUT 比如这样的例子 static async Task<string> TestHttpClient(str ...

  4. springboot 使用DruidDataSource 数据源

    一.添加依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</art ...

  5. JavaScript Number() 函数

    JavaScript Number() 函数 JavaScript 全局对象 定义和用法 Number() 函数把对象的值转换为数字. 语法 Number(object) 参数 描述 object 必 ...

  6. Visual Studio 2017版本15.9现在可用

    本文转自 https://blogs.msdn.microsoft.com/visualstudio/2018/11/19/visual-studio-2017-version-15-9-now-av ...

  7. try-catch-finally异常处理:

    java中三种实现多态的方案: 一:父类:普通类,普通方法: 子类:普通类,普通方法: 二:父类:抽象类,抽象方法: 子类:普通类,重写父类的抽象方法: 三:父类:接口类,抽象方法: 子类:普通类,实 ...

  8. 代码备忘录--常用的一些Doxygen格式

    1.文件头的格式: /** **************************************************************************** * @file x ...

  9. 【ZJOI2012】灾难 - LCA+拓扑排序

    题目描述 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过生物的阿米巴告 ...

  10. 太厉害了,阿里大牛居然把Git,GitHub总结的这么全面,撸源码去

    “版本控制系统”( Version Control System, vcs)是程序代码管理软件的通称,是用来保存程序文件的修改记录以及历史版本,以便日后查看或是使用.Vcs已经有数十年的发展历史,最早 ...