实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递。

需求: a页面tree的增删改后,数据还是之前的老数据,要求b页面的tree的数据也要更新。

A页面: 绑定事件,并通过eventBus.$emit触发。

 增加 window.eventBus.$emit('getTreeData',1)
 getTreeData(){ // 获取节点数据
window.eventBus.$emit('getTreeData',1)
axios.get('getpro/getTree')
.then((res) => {
if(res.data.retCode === '200'){
this.Opt = Vue.formatTreeData3(res.data.data)
},

B页面: created或者mounted里调用,使用eventBus.$on接收。

    window.eventBus.$on('getTreeData',()=>{
this.getTreeData()
})

Vue 使用eventBus 实现兄弟组件间的通信的更多相关文章

  1. 使用EventBus实现兄弟组件之间的通信

    使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...

  2. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  3. Vue.JS快速上手(组件间的通信)

    前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...

  4. vue2.0中eventBus实现兄弟组件通讯

    我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是event ...

  5. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  6. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  7. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  8. vue组件间的通信

    组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...

  9. vue父子组件、兄弟组件之间的通信和访问

    注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...

随机推荐

  1. 数据统计,包括mysql和MongoDB

    select ct.dt, COUNT(DISTINCT c.id) from tms_service_customer c, tms_dispatch_details d, (select DIST ...

  2. CentOS 6 多实例 编译安装mariadb-5.5.59

    系统平台: CentOS release 6.9 (Final) 内核 2.6.32-696.el6.x86_64 1.去官网下载适合的源码包 http://mariadb.org/ mariadb- ...

  3. Redis入门(一)

    Redis入门 什么是Redis Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库,属于非关系型数据库的一种(NoSQL). Redis 与其他 key - val ...

  4. Aizu - 1382 Black or White (分段决策,单调队列优化dp)

    题意:给定只有黑白两种颜色的序列A,B,每次可以选择一段连续的长度不超过k的区间将其染成同一种颜色,求把序列A变成B所需的最小操作次数. 首先需要找出一些最优解的特征: 1.如果序列A的第一个颜色和B ...

  5. 19-SQLServer定期自动导入数据的dtsx部署

    一.注意点 1.登录Integration Service必须使用windows用户,并且只能在本地服务器登录. 2.SQLServer2000以前,叫dts,全程Data Transformatio ...

  6. 洛谷P4001 [BJOI2006]狼抓兔子(平面图转对偶图)

    传送门 明明只要最小割加点优化就能过的东西…… 然而我偏偏要去学平面图转对偶图结果发现课件关键地方看不清->这里 而且建图累的半死…… 说实话只要最大流建图的时候反向边直接设为当前边容量再加个当 ...

  7. 【集训队作业2018】count

    CSP后第一发Blog. 这道题没有一下子过掉,开始还推出了错的结论.在错误的生成函数里绕了好久-- 很显然的转笛卡尔树,一个笛卡尔树对应一种序列.只要考虑一个笛卡尔树是否合法. 贪心地填数发现,从根 ...

  8. asmlinkage的用法

    转自:https://www.cnblogs.com/china_blue/archive/2010/01/15/1648523.html https://blog.csdn.net/liujiaoy ...

  9. Yet Another Division Into Teams

    E. Yet Another Division Into Teams 首先要想明白一个东西,就是当一个小组达到六个人的时候,它一定可以拆分成两个更优的小组. 这个题可以用动态规划来写,用一个数组来保存 ...

  10. Leetcode题目101.对称二叉树(简单)

    题目描述: 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2,2,null ...