Vue组件通信之bus详解

作为一名frontend coder， vue也用了有年头了，最近看到相关内容时想着总结一些知识记录下来，vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。很多刚学前端使用vue的同学被问到这个时，大概知道props和emit时间提交，再或者是vuex状态管理。
其实vue组件之间通信的方式有很多种，
其实组件间通信有很多种，包括父子组件之间和兄弟之间以及子孙之间

props&emit
vuex state manage
v-model
slot-scope
refs
$parent & $children
$bus
privide和inject
main.js
other，ex:cookie、storage and so on

关于slot-scope和privide&inject我在之前的文章中讲过了。
今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时，尤为好用，
具体实现：
在main.js文件中定义一个新的bus对象并且挂载在vue原型上，其实是一个Vue实例：

Vue.prototype.$bus = new Vue()  //EventBus事件中转  add by lau

触发事件的组件：

watch:{radio(newVal){this.$bus.$emit('radioChange', newVal)}
}

接收事件的组件：

created() {// 监听radioChangethis.$bus.$on('radioChange', res=>{console.log("radioChange",res)})},

这时候就拿到的变更数据，非常简单，方便快捷，尤其时多依赖，且没有做全局数据共享的业务开发中

Vue组件通信之bus详解相关推荐

Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
vue 组件高级用法实例详解
一.递归组件组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
Android四大组件Service之AIDL详解
Android四大组件Service之AIDL详解前言简介基础知识 AIDL 服务端定义AIDL文件规则创建 .aidl 文件清单注册通过 IPC 传递对象调用 IPC 方法 Andr ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...

Vue组件通信之bus详解

Vue组件通信之bus详解相关推荐

最新文章

热门文章