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


安装: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. Docker学习日记-安装Docker

    Docker是什么: 简单理解就是基于go语言开发的开源的应用容器引擎. 对进程进行封装隔离,属于操作系统层面的虚拟化技术. Docker的优势: 1.更高效的利用系统资源 2.更快速的启动时间 3. ...

  2. 深度学习论文翻译解析(十二):Fast R-CNN

    论文标题:Fast R-CNN 论文作者:Ross Girshick 论文地址:https://www.cv-foundation.org/openaccess/content_iccv_2015/p ...

  3. 学习 Python,这 22 个包怎能不掌握?

    如今全球各个行业内 Python 的使用状况怎么样呢? 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去 ...

  4. 最全总结!聊聊 Python 发送邮件的几种方式

    1. 前言 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大 ...

  5. 【av68676164(p25-p30)】同步和P-V操作

    4.5 同步和P-V操作 4.5.1 同步和互斥的概念 进程的互斥关系 例子 进程的互斥关系 多个进程由于共享了独占性资源,必须协调个进程对资源的存取顺序:确保没有两个或以上的进程同时进行存取操作. ...

  6. 静态集成腾讯TBS X5内核WebView,从微信提取新版30M浏览器内核打包进apk

    目录 前情提要 第一步:下载老版本SDK得到jar 获取SDK 集成SDK 步骤二.下载提取最新TBS X5内核 方法1:从微信中提取 方法2:App内内访问tbs调试页安装新内核 步骤三.集成内核到 ...

  7. JavaScript 实用方法

    1.按时间显示问候语 2.强制光标停留位置 3.保存页面文本 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN& ...

  8. java循环语句while与do-while

    一 while循环 while循环语句和选择结构if语句有些相似,都是根据条件判断来决定是否执行大括号内的执行语句. 区别在于,while语句会反复地进行条件判断,只要条件成立,{}内的执行语句就会执 ...

  9. 2020-06-18:ZK的分布式锁怎么实现?

    福哥答案2020-06-18: Zk分布式锁有两种实现方式一种比较简单,应对并发量不是很大的情况.获得锁:创建一个临时节点,比如/lock,如果成功获得锁,如果失败没获得锁,返回false释放锁:删除 ...

  10. C#LeetCode刷题-分治算法

    分治算法篇 # 题名 刷题 通过率 难度 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组的中位数(Median of Two Sorted Arrays)-该题未达最优解 30 ...