最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实现方案。

有这么几种数据传递方式,vuex、props、eventBus和特殊的eventBus。

特殊的eventBus

// bus
const bus = new Vue({
data () {
return {
// 定义数据
val1: ''
}
},
created () {
// 绑定监听
this.$on('updateData1', (val)=>{
this.val1 = val
})
}
}) //数组发出组件
import bus from 'xx/bus'
// 触发在bus中已经绑定好的事件
bus.$emit('update1', '123') //数据接收组件
{{val1}}
// 使用computed接收数据
computed () {
val1 () {
// 依赖并返回bus中的val1
return bus.val1
}
}

与正统的eventBus不同

  1. 正统的eventBus只是用来绑定触发事件,并不关心数据,不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。

  2. 数据接收方不再使用$on来得知数据变化,而是通过计算属性的特征被动接收。

解决的问题

  1. 通信组件需同时存在?数据在bus上存储,所以没有要求。

  2. 多次绑定?绑定监听都在bus上,不会重复绑定。

  3. 数据只在$emit后可用?使用计算属性直接读取存在bus上的值,不需要再次触发事件。

vue数据传递的特殊实现技巧的更多相关文章

  1. vue数据传递--我有特殊的实现技巧

    最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...

  2. vue 数据传递的方法

    组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值 组件实例的作用域是 ...

  3. [Unity3D]场景间切换与数据传递(以及物体删除技巧)

    http://blog.163.com/kingmax_res/blog/static/77282442201031712216508/ 先介绍一些基本函数(具体用法自己查文档):---------- ...

  4. 剖析 Rails 3 MVC 中的数据传递

    引用链接:https://www.ibm.com/developerworks/cn/web/1108_linhx_rails3mvc/ 如果读者已经开发过基于 Rails 的应用,但对其 MVC 间 ...

  5. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  6. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  7. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  8. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  9. vue再次入手(数据传递①)

    准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...

随机推荐

  1. Mycat配置入门

    配置: --bin 启动目录 --conf 配置文件存放配置文件: --server.xml:是Mycat服务器参数调整和用户授权的配置文件. --schema.xml:是逻辑库定义和表以及分片定义的 ...

  2. Confluence 6 连接一个目录

    你可以添加下面类型的目录服务器和目录管理器: Confluence 的内部目录(Configuring the Internal Directory). Microsoft Active Direct ...

  3. PHP函数笔记

    一.函数(Function) 1.什么是函数:封装的,可以重复使用的                       完成特定功能的代码段. 2.分类  (1)系统函数  (2)自定义函数 3.自定义函数 ...

  4. POJ-1129 Channel Allocation (DFS)

    Description When a radio station is broadcasting over a very large area, repeaters are used to retra ...

  5. juqery的一些简单用法

    层级选择器(重点).基本过滤选择器 :eq(index) 选择匹配到的元素中索引号为index的一个元素,index从0开始 :odd 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 : ...

  6. C#窗体控件简介ListBox(需整理)

    ListBox 控件 ListBox 控件又称列表框,它显示一个项目列表供用户选择.在列表框中,用户 一次可以选择一项,也可以选择多项. 1.常用属性: (1) Items属性: 用于存放列表框中的列 ...

  7. struts2整合axis2后,访问不到wsdl,被struts2拦截的解决办法

    在struts2中整合axis2后,访问wsdl的时候显示404  not found There is no Action mapped for action name xxxxxxxx. 解决办法 ...

  8. Idea破解办法+idea免费生成注册码+jsp属性选择器+注解什么的都报错

    Idea破解办法: http://blog.csdn.net/bitcarmanlee/article/details/54951589 idea免费生成注册码: http://idea.iteblo ...

  9. forget word qz_out_b1

    1★ be bi prep 使~成为:   2★ bene b əni 好,善 :祈祷     3★ bi 2, 双重, 两个 bi   4★ by   b æ / 通过,在~之前  

  10. 火狐扒代码插件ScrapBook

    ScrapBook这个火狐插件很好用,但偶尔用下,不经常使用,是仿站扒代码的前端利器.