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


安装: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. 原来写个Vue 首页就这么简单

    全栈的自我修养: 为我们的项目添加首页 You can never replace anyone. What is lost is lost. 每个人都是无可替代的,失去了便是失去了. 前言 上篇文章 ...

  2. C# 实现线程的常用几种方式

    前言 在各个开发语言中,线程是避免不了的,或许通过表象看不出来,但是真的无处不在.就比如一个Web程序,平时或许只注重增删改查的开发,根本没有编写相关多线程的的代码,但是请求内部的时候,已经分配了对应 ...

  3. mqtt第一次接触

    一.接触的原因 公司最近要求接手关于系统集成道闸的部分,其中系统和第三方系统是通过mqtt进行交互的.所以提前了解一下mqtt的基础概念. 二.mqtt的基本概念 1. mqtt的定义 Message ...

  4. HIVE常用正则函数(like、rlike、regexp、regexp_replace、regexp_extract)

    Oralce中regex_like和hive的regexp对应 LIKE 语法1: A LIKE B 语法2: LIKE(A, B) 操作类型: strings 返回类型: boolean或null ...

  5. Spring IOC 剖析

    模拟实现 Spring Ioc 控制反转功能 使用 => 原理 => 源码 => 模拟实现 使用:了解 原理:熟悉 源码 And 模拟实现: 精通 对照 Spring 功能点 Spr ...

  6. Cross-Stage-Partial-Connections

  7. NOIP真题索引

    NOIP真题索引 NOIP2019 Day 1 格雷码 括号树 树上的数 Day 2 Emiya 家今天的饭 划分 树的重心 NOIP2018 Day 1 铺设道路 货币系统 赛道修建 Day 2 旅 ...

  8. PAT 2-09. 装箱问题模拟(20)

    题目链接 :http://www.patest.cn/contests/ds/2-09 解题思路:直接模拟, 记录已经使用的箱子的剩余容量, 如果已经使用的箱子中没有可以放下物品的箱子, 在增加另一个 ...

  9. Android Studio gridview 控件使用自定义Adapter, 九宫格items自适应全屏显示

    先看效果图,类似于支付宝首页的效果.由于九宫格显示的帖子网上已经很多,但是像这样九宫格全屏显示的例子还不是太多.本实例的需求是九宫格全屏显示,每个子view的高度是根据全屏高度三等分之后自适应高度,每 ...

  10. get customer attribute option

    Mage::getResourceSingleton('customer/customer')->getAttribute('gender')->getSource()->getAl ...