Vue 使用eventBus 实现兄弟组件间的通信
实现方式: 主要是在相互通信的兄弟组件之中,都引入一个新的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 实现兄弟组件间的通信的更多相关文章
- 使用EventBus实现兄弟组件之间的通信
使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- vue2.0中eventBus实现兄弟组件通讯
我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是event ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化
一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
- vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
随机推荐
- Aizu - 1383 Pizza Delivery (最短路图+DAG上的割边)
题意:给出一张有向图,每条边有长度,对于每条边,你要回答将该边的方向取反后,从起点到终点的最短距离是增加or减小or不变. 首先求出起点到所有点的最短距离和所有点到终点的最短距离(两次DIjkstra ...
- BZOJ3032 七夕祭[中位数]
发现是一个类似于“纸牌均分”的问题.然后发现,只要列数整除目标.行数整除目标就一定可以. 如果只移动列,并不会影响行,也就是同一行不会多不会少.只移动行同理. 所以可以把两个问题分开来看,处理起来互不 ...
- 微信小程序审核不通过的解决方法
前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结, ...
- 前端知识体系:JavaScript基础-原型和原型链-理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题
理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题(原文文档) 1.什么是执行上下文: 简而言之,执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,Java ...
- Java 注解(Annotations) 详解
注解是元数据 注解是一种装饰器.一个标记(maker),应用于Java的各种结构之上,例如类.方法.字段.用来为这些结构绑定元数据.注解不包含任何业务逻辑. 只由运行时框架或编译器根据注解信息去执行具 ...
- PHP mysqli_num_rows() 函数
<?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect("localhost","root& ...
- window上git bash运行错误记录
错误现象:每次启动git bash报出如下错误gitbash 0 [main] bash 11928 fork: child -1 - CreateProcessW failed for 'D:\P ...
- Hdu 1247 Hat's Words(Trie树)
Hat's Words Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- node和npm版本引起的安装依赖和运行项目失败问题
问题:node版本不同导致的安装依赖版本不同而无法启动 https://www.jianshu.com/p/c07293c8c6d4 实际上问题分为两个部分: 1,npm包管理器安装依赖不成功,此时需 ...
- hashcode(),equal()方法经典分析
首先,想要明白hashCode的作用,必须要先知道Java中的集合. 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重 ...