实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的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. 如何在SpringBoot的 过滤器之中注入Bean对象

    我建立一个全局拦截器,此拦截器主要用于拦截APP用户登录和请求API时候,必须加密,我把它命名为SecurityFilter,它继承了Filter,web应用启动的顺序是:listener->f ...

  2. MyBatis-13-缓存

    13.缓存(了解) 13.1.简介 查询 : 连接数据库,耗资源! 一次查询的结果,给他暂存在一个可以直接取到的地方!--->内存 : 缓存 我们再次查询相同数据的时候,直接走缓存,就不用走数据 ...

  3. NPM酷库:jsdom,纯JS实现的DOM

    NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢 ...

  4. UVALive 6862——结论题&&水题

    题目 链接 题意:求满足$0 \leq x \leq y \leq z \leq m$且$x^j + y^j = z^j, \ j=2 \cdots n$的三元组的对数 分析 由费马大定理:整数$n ...

  5. 多个idea项目使用同一个tomcat

    配置好tomcat后,每个项目使用不同的虚拟路径.并且把tomcat端口改为不一样的就可以了.

  6. [Python自学] day-21 (2) (Cookie、FBV|CBV装饰器)

    一.什么是Cookie 1.什么是Cookie? Cookie是保存在客户端浏览器中的文件,其中记录了服务器让浏览器记录的一些键值对(类似字典). 当Cookie中存在数据时,浏览器在访问网站时会读取 ...

  7. MFC 用户登录、注册、工作主窗体

    创建项目由向导生成的窗体作为工作的主窗体.用户登录.注册窗体添加对话框来实现. [具体功能] 1.主窗体应该出现在登录窗体成功之后. 2.登录窗体关闭(右上角❌),程序直接退出. 在App.cpp的I ...

  8. c++继承子类构造函数问题

    c++中子类在继承基类的时候需要在构造函数中初始化变量.如果基类没有构造函数或者只有不带参数的构造函数,那么子类中的构造函数就不需要调用基类的构造函数了. 个人总结了两点子类中构造函数必须调用父类的构 ...

  9. Manjaro XFCE 设置分辨率1920*1080

    #查看系统显示器名称 xrandr #自定义cvt 1920 1080 #设置分辨率xrandr --newmode "1920x1080_60.00" 173.00 1920 2 ...

  10. linux下编译利用CMakeLists.txt 编译C++写的opencv程序

    https://hihozhou.com/blog/2017/05/11/linux-compile-opencv-c++-file.html cmake . make -j8