在一些正规的大型项目的企业级开发过程中我们一般会引入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如何实现兄弟组件间的通信的更多相关文章

  1. Vue 使用eventBus 实现兄弟组件间的通信

    实现方式:  主要是在相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递. 需求: a页面tree的增删改后,数据还是之前的老数据 ...

  2. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  3. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  4. vue父子组件、兄弟组件之间的通信和访问

    注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...

  5. vue的$emit 与$on父子组件与兄弟组件的之间通信

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...

  6. 使用EventBus实现兄弟组件之间的通信

    使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...

  7. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  8. vue组件间的通信

    组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...

  9. Vue.JS快速上手(组件间的通信)

    前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...

随机推荐

  1. SVM处理多分类问题(one-versus-rest和one-versus-one的不同)

    SVM算法最初是为二值分类问题设计的,当处理多类问题时,就需要构造合适的多类分类器. 目前,构造SVM多类分类器的方法主要有两类:一类是直接法,直接在目标函数上进行修改,将多个分类面的参数求解合并到一 ...

  2. Servlet实现文件上传和下载

    对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具commo ...

  3. BZOJ2694 Lcm 【莫比乌斯反演】

    BZOJ2694 Lcm Description Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 表示N.M Output T行 每行一个整数 表示第i组数据的结果 Sample I ...

  4. Exception.Data 为异常添加更多调试信息

    我们抛出异常是为了知道程序中目前的状态发生了错误.为了能够知道错误的详细信息便于我们将来避免产生这样的错误,我们会选用合适的异常类型,在异常中编写易于理解的 message 信息.但是有时我们需要更多 ...

  5. {Reship}{Sparse Representation}稀疏表示

    ===================================================== http://blog.sina.com.cn/s/blog_6d0e97bb01015wo ...

  6. 关于浏览器和IIS基础的简单理解

    浏览器 输入域名或者IP地址,按回车访问后:发生了什么??IIS是如何工作的?为什么能这么工作?? 1    浏览器和IIS 分别是两个应用程序:浏览器访问网址实际就是  两个应用程序的数据交互往来: ...

  7. cocos2dx 云彩特效

    cocos2dx 云彩特效,就是一张云彩Png 图片从屏幕左边移动到右边,再从左边移动到右边 yuncai = static_cast<ImageView*>(Helper::seekWi ...

  8. C++ 命名空间解释

    using关键字 如果在程序中需要多次引用某个命名空间的成员,那么按照之前的说法,我们每次都要使用范围解析符来指定该命名空间,这是一件很麻烦的事情.为了解决这个问题,人们引入了using关键字.usi ...

  9. Oracle数据库clob字段导出为sql insert插入语句

    oracle数据库的clob字段导出为sql insert插入语句可以分三种情况:1,clob没有换行符:2,clob有换行符但不以分号结尾:3,clob有换行符并且以分号结尾. clob没有换行符使 ...

  10. 【转】Jmeter变量参数化及函数应用

    我们在使用Jmeter录制脚本后,经常会对已录制的脚本进行修改,需要把一些参数使用一些变量替代,Jmeter是支持这些功能的,不过是通过函数实现的.下面举一个简单的例子,使用随机数替代一个参数: 打开 ...