Vue 非父子组件通信方案

概述

在 Vue 中模块间的通信很普遍

如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要先监听对应子组件触发的事件) 向父组件传递信息。

但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递:

下面是常见的两种非父子组件通信方案:

  1. 使用一个空的 Vue 实例作为一个事件总线中心 Bus
  2. 使用专门的状态管理模式 vueX

一、事件总线中心 Bus

总线中心 Bus 的实现思想是先把自己在 main.js 里进行全局注册,这样在每个组件都能通过 this 访问到它,由于 Bus 本身就是一个 vue 实例,所以具备 $emit$on 方法,这样我们就能在 Bus 上通过自定义事件的方式发送和监听事件来传递数据,而且不受组件的位置关系影响。

具体使用如下:

1. 在 main.js 里面

将 bus 从 通过 Vue.prototype 全局注册,这样在所有的vue实例中都能通过 this.$bus 访问到 Bus:

import Vue from 'vue'

const bus = new Vue()
Vue.prototype.$bus = bus

2. 在需要发送或接收事件的组件里面

    // 触发事件
this.$bus.$emit('my-event', this.data);
// 监听事件
this.$bus.$on('my-event', this.handleFunction);
// 取消事件
this.$bus.$off('my-event', this.handleFunction); // 实际使用场景,在需要监听事件的组件中 在 created监听,在beforeDestroy中取消
created (){
this.$bus.$on('switch-change', this.switchChange);
},
beforeDestroy () {
this.$bus.$off('switch-change', this.switchChange);
},

二、状态管理模式 vueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。具体实现这里有详细的介绍

Vue 非父子组件通信方案的更多相关文章

  1. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  2. 详解Vue 非父子组件通信方法(非Vuex)

    假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...

  3. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  4. vue组件通信之非父子组件通信

    什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以 ...

  5. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

  6. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  7. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  8. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  9. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

随机推荐

  1. Azure Automation (5) 调整Azure SQL Database DTU

    <Windows Azure Platform 系列文章目录> 之前有客户提了需求,在9点以后,把Azure SQL Database DTU提高 在凌晨,把Azure SQL Datab ...

  2. HashMap----工作原理

    先来些简单的问题 "你用过HashMap吗?" "什么是HashMap?你为什么用到它?" 几乎每个人都会回答"是的",然后回答HashMa ...

  3. linux下ACE的编译与安装

    1.环境变量的设置vim /etc/profile 2.然后输入export ACE_ROOT=/root/ACE/ACE_wrappers export MPC_ROOT=$ACE_ROOT/MPC ...

  4. 音乐之声——midi制作原理

    实际发出声音需要4项必备的条件 1 发生的装置 Sequencer     把sequencer想成CD播放机 (plays) 2 要演奏的乐曲 Sequence     sequence就好像是单曲 ...

  5. Hive入门教程

    Hive 安装 相比起很多教程先介绍概念,我喜欢先动手装上,然后用例子来介绍概念.我们先来安装一下Hive 先确认是否已经安装了对应的yum源,如果没有照这个教程里面写的安装cdh的yum源http: ...

  6. 使用mybatis插入自增主键ID的数据后返回自增的ID

    在开发中碰到用户注册的功能需要用到用户ID,但是用户ID是数据库自增生成的,这种情况上网查询后使用下面的方式配置mybatis的insert语句可以解决: <insert id="in ...

  7. IE8兼容问题总结---trim()方法

    1.IE8不支持,jquery的trim()去空格的方法 错误表现 : 会报错,对象不支持此属性或方法; 解决办法 : 使用正则匹配空格 例如 : /^\s+|\s+$/greplace(/^\s+| ...

  8. Mysql给某一台主机授权访问,修改root密码

    ubuntu上用的是phpstudy,安装好之后,敲mysql,提示没有,需要安装mysql的客户端. 安装好之后直接敲mysql,敲 mysql 再敲use mysql 再敲mysql -uroot ...

  9. Mysql主从复制_模式之日志点复制

    MySQL数据复制的原理 MySQL复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新.删除等等).因此,要进行复制,必须在主服务器上启用二进制日志. 每个从服务器从主服务器接收主服务器已经记 ...

  10. 第十九章 Django的ORM映射机制

    第十九章 Django的ORM映射机制 第一课 Django获取多个数据以及文件上传 1.获取多选的结果(checkbox,select/option)时: req.POST.getlist('fav ...