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 ...
随机推荐
- 表单重置时 <input type=“hidden”> 隐藏域不可被重置
可封装全局样式 .hide{ display:none; } 用 <input type="text" class="hide"/> 替代
- 多种view视图和序列化--django2
models.py from django.db import models # Create your models here. class Idc(models.Model): name = mo ...
- Bootstrap-轮播图-No.9
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- “景驰科技杯”2018年华南理工大学程序设计竞赛 B. 一级棒!(并查集)
题目链接:https://www.nowcoder.com/acm/contest/94/B 题意:在一棵有 n 个节点的树上,有两种操作,一个是把 u 到 v 的路径走一遍,另一个是查询 u 到 f ...
- 洛谷P1282 多米诺骨牌【线性dp】
题目:https://www.luogu.org/problemnew/show/P1282 题意: 给定n个牌,每个牌有一个上点数和下点数.可以通过旋转改变交换上下点数. 问使得上点数之和和下点数之 ...
- Javascritp 数据结构和二叉树算法
1,所有圆圈都是一个节点,里面的数字就是节点的值.8上面没有父节点,那么8就是根节点,而4,7,13没有子节点了,称之为叶子结点.其他的称之为:中间结点. 2,8节点是3和10的父节点,3是8的左孩子 ...
- [人物存档]【AI少女】【捏脸数据】洛莉
点击下载(城通网盘):AISChaF_20191111003514067.png 点击下载(城通网盘):AISChaF_20191112014313168_20191113_232904.png
- Intel Code Challenge Final Round D. Dense Subsequence 二分思想
D. Dense Subsequence time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 【csp模拟赛5】购物(shopping.cpp)--常规
多项式,因为每次的x相同,所以把a和b相加就行了,然后找对称轴,找离对称轴最近的整数点,然而我却写了个暴力,没看x #include <iostream> #include <cst ...
- ie8中如何使用base64
由于ie8中不能使用jQuery2.0以上版本所以无法使用 window.btoa()加密 window.atob()解密 所以只能使用最原生的base64加密方法如下: /** * Created ...