Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信。但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信?父组件与子组件间就不说了,关于兄弟组件间通信,这里有个简单方法。
1.新建bus.js,new一个Vue实例:
import Vue from 'vue';
export default new Vue;
2.需要通信的组件都引入该bus.js
import Bus from '@/util/bus';
3.调用Bus的触发事件和监听事件实现通信
Bus.$emit('changeIndex', index);
Bus.$on('changeIndex', (index) => {
this.navIndex = index;
});
这里的bus.js可以理解为是公共汽车,这个bus的作用就是行驶在各个组件之间从而实现组件间通信、参数传递,写起来也比较方便,这种实现方式Vue官网也有介绍,可以通过单独的事件中心管理组件间的通信:eventHub。
Vue2不使用Vuex如何实现兄弟组件间的通信的更多相关文章
- Vue 使用eventBus 实现兄弟组件间的通信
实现方式: 主要是在相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递. 需求: a页面tree的增删改后,数据还是之前的老数据 ...
- Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化
一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
- vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...
- 使用EventBus实现兄弟组件之间的通信
使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
随机推荐
- 20179223《Linux内核原理与解析》第六周学习笔记
视频知识学习 给MenuOS增加time和time-asm命令 1.更新menu代码到最新版 2.再main()函数中增加MenuConfig 3.增加对应的Time函数和TimeAsm函数(这里的函 ...
- flask第八篇——url_for【1】
我们已经知道,知道了url就可以找到对应的视图函数,那么现在问题来了,如果我们知道了视图函数,要怎么找到url呢?这时候我们就需要url_for函数了. # coding: utf-8 from fl ...
- 《selenium2 python 自动化测试实战》(18)——自动化测试模型(一)
线性测试 已经被淘汰了:线性测试就是一个脚本完成一个场景,代码基本没有复用,每一个脚本都要从头开始写——这哪行. 模块化与类库 这个就是分模块:有点类似面系那个对象,把功能(比如登录)单独拿出来,当下 ...
- python面试题(十)
Python中基本数据结构的操作 元组 列表 字典 集合 定义 新增 更改 删除 2.请尽可能列举python列表的成员方法,并给出一下列表操作的答案: (1)a=[1, 2, 3, 4, 5], a ...
- Automating CSS Regression Testing
The following is a guest post by Garris Shipon . We've touched on the four types of CSS testing here ...
- hadoop之 HDFS fs 命令总结
版本:Hadoop 2.7.4 -- 查看hadoop fs帮助信息[root@hadp-master sbin]# hadoop fsUsage: hadoop fs [generic option ...
- string源码实现分析
最近写hashtable的实现的时候用模板类的思想,在普通int,long,double类型的时候测试时没问题的,当用到string的时候,一直有问题. 实现的equal函数是比较粗暴的使用两者所有对 ...
- expdp实现oracle远程服务器导出到本地
expdp导出 expdp user/pwd@orcl directory=dd network_link=dblink dumpfile=fileName.dmp //user为本地用户名 //ne ...
- 如何把SQLServer数据库从高版本降级到低版本
如何把SQLServer数据库从高版本降级到低版本 编写人:CC阿爸 2015-4-7 近期在给一个客户推行ECM系统时,基本客户的硬件环境,我们为其安装的为SQL2008 64位的数据库系统.在安装 ...
- HotSpot Stop-and-Copy GC
rednaxelafx的Cheney算法的伪代码.如果不用forwarding的话,维护一个旧地址到新地址的映射也可以. 其中重点部分: void Heap::collect() { // The f ...