实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的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. python_函数作用域

    py文件:全局作用域 函数:局部作用域 一个函数是一个作用域 def func(): x = 9 print(x) func() print(x) 作用域中查找数据规则:优先在自己的作用域找数据,自己 ...

  2. Aizu - 1383 Pizza Delivery (最短路图+DAG上的割边)

    题意:给出一张有向图,每条边有长度,对于每条边,你要回答将该边的方向取反后,从起点到终点的最短距离是增加or减小or不变. 首先求出起点到所有点的最短距离和所有点到终点的最短距离(两次DIjkstra ...

  3. 编辑器 --- Visual Studio Code 英文界面转换成中文(简体)

    打开编辑器 同时按下Ctrl+Shift+P打开命令面板: 之后输入"config"筛选可用命令表,最后选择配置语言命令进行选择或安装插件

  4. Mybatis中的拦截器

    作者:moshenglv的专栏 拦截器的一个作用就是我们可以拦截某些方法的调用,我们可以选择在这些被拦截的方法执行前后加上某些逻辑,也可以在执行这些被拦截的方法时执行自己的逻辑而不再执行被拦截的方法. ...

  5. 长春理工大学第十四届程序设计竞赛A Rubbish——并查集&&联通块

    题目 链接 题意:在 $10^5 \times 10^5$ 的大网格上,给出 $n$ 的格点的坐标,求联通块数(上下左右及对角线都认为相邻) 分析 DFS需要遍历网格的每个格点,可能会超时? 初始化时 ...

  6. 智能指针weak_ptr记录

    智能指针weak_ptr为弱共享指针,实际上是share_ptr的辅助指针,不具备指针的功能.主要是为了协助 shared_ptr 工作,可用来观测资源的使用情况.weak_ptr 只对 shared ...

  7. c++ const修饰词

    常变量:  const 类型说明符 变量名    // const int i = 20;常变量定义必需初始化赋值且变量值不可更改 常引用:  const 类型说明符 &引用名  //引用:指 ...

  8. Java面向对象5(V~Z)

    计算各种图形的周长(接口与多态)(SDUT 3338) import java.util.Scanner; public class Main { public static void main(St ...

  9. isPrototypeOf,instanceof, hasOwnProperty,in的作用与区别

    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型.或者说一个对象是否被包含在另一个对象的原型链中 function Fn(name){ this.name=name; } var ...

  10. vsftp的安装和使用

    检查Linux系统是否安装了vsftpd的命令: rpm -qa|grep vsftpd 2.安装命令: yum -y install vsftpd 3.卸载命令: yum remove vsftpd ...