vue中兄弟组件间 的传值 bus(可以理解为公共交通)

点击大儿子(头部组件的年月日,下面的都要变化)
就相当于点击了年月日之后,下面的组件重新调接口,参数变化


1.首先随便哪儿写个bus。js
内容如下:
import Vue from 'vue'
export default new Vue;
2.在需要通信的组件都引入Bus.js (两兄弟都要引入)
如上图所示大儿子按钮触发事件,$emit 传数据,另一个兄弟组件mounted接受,$on接受数据搞定

vue中兄弟组件间 的传值 bus(可以理解为公共交通)的更多相关文章
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- 五、react中父子组件间如何传值
1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
随机推荐
- PHP微信支付开发
此链接https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_2,是微信官方的示例,无效,报错. 1.申请微信支付的开通条件?什么样的账号可以 ...
- 在eclipse中导入hadoop jar包,和必要时导入源码包。
1. 解药hadoop包 1, C:\hadoop-2.7.2\share\hadoop 提取出所有的 jar 包, 到 _lib 文件夹下 2,将有含有source 名称的jar包 剪切出来 3, ...
- Impala2.7.0-cdh5.x.x安装部署
部署impala impala安装选择rpm包方式进行,这是本次部署唯一一个主要主件采用rpm方式进行安装部署,这里主要原因是cloudera没有提供现成的tar包文件,而源码编译过程会出现各种未知原 ...
- php之sphinx
1.修改sphinx配置文件? source 数据源名称 { type = mysql ######数据源类型 sql_host = #######数据库主机地址(如果是外网,请确保防火墙允许链接) ...
- bootstrape学习
bootstrape学习 已分享到有道上:http://note.youdao.com/share/?id=076fb6314c99c742a79f6fb66b2a58b0&type=note ...
- JsLint 的安装和使用
JSLint 是一款Javascript验证工具,在定位错误并确保基本指南得以遵循时,非常有用.如果你正在编写专业级的javascript,应该使用 JSLint 或者类似的验证工具(JSHint). ...
- [daily][gnucash] 复式记账
管理, 是成就人生的第一步. 管钱,是第一步中的第一小步. 选了又选,终于选了一个软件,gnucash, 但是, 他有点专业, 用之前需要搞懂一下会计概念. 即: 复式记账 gnucash手册的这一章 ...
- springboot的filter使用
package com.filter; import org.springframework.core.annotation.Order; import javax.servlet.*; import ...
- elasticsearch安装IK分词插件
一 打开网页:https://github.com/medcl/elasticsearch-analysis-ik/releases 这个是ik相关的包,找到你想下载的版本,下载对应的zip包 二 然 ...
- pandas基础运算
重新索引 (1)reindex重新索引,在已有的索引基础上新建索引,fill_value可以指定新建索引默认值 (2)#新建索引,如果新建的索引值为空自动填充之前的值 对于DataFrame重新索引同 ...