实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的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. 一个 TCP 连接可以发多少个 HTTP 请求?

    曾经有这么一道经典面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么?相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式. ...

  2. 【bzoj3083】遥远的国度(树链剖分+线段树)

    题目描述 zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了zcwwzdjn的去路,他需要zcwwzdjn完成 ...

  3. ACM-ICPC 2017 南宁赛区现场赛 M. The Maximum Unreachable Node Set(二分图)

    题目链接:https://nanti.jisuanke.com/t/19979 题意:给出一个 n 个点,m 条边的 DAG,选出最大的子集使得其中结点两两不能到达. 题解:参考自:https://b ...

  4. 查看nginx服务器状态

    编译安装时使用--with-http_stub_status_module开启状态页面模块 [root@proxy ~]# yum -y install gcc pcre-devel openssl- ...

  5. php上传大文件的解决方案

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  6. IntelliJ 如何显示代码的代码 docs

    希望能够在 IntelliJ 代码上面显示方法的 docs. 如何进行显示? 你可以使用 Ctrl + Q 这个快捷键来查看方法的 Docs. https://blog.ossez.com/archi ...

  7. bbs--文章后台

    bbs--文章后台 需求分析 在个人文章后台中 1 有添加文章的接口 展示文章标题输入框 文本编辑框 标签 分类 选择框 提交 2 编辑文章的接口 页面与添加文章相同,就是把该文章的内容展示到文本编辑 ...

  8. List,Set,Map在java.util包下都是接口 List有两个实现类:ArrayList和LinkedList Set有两个实现类:HashSet和LinkedHashSet AbstractSet实现了Set

    List,Set,Map在java.util包下都是接口 List有两个实现类:ArrayList和LinkedListSet有两个实现类:HashSet和LinkedHashSetAbstractS ...

  9. [Linux]kali更新/etc/apt/sources.list

    vim /etc/apt/sources.list #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contri ...

  10. pycharm同一目录下无法import其他文件

    如图:会出现带有红色波浪线,但是确实有random_walk文件 解决方法: 在当前文件下,右键找到mark  Directory as 然后选择source root,完工ok 再如图: 版权声明: ...