vue数据传递的特殊实现技巧
最近碰到了比较多的关于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不同
正统的eventBus只是用来绑定和触发事件,并不关心数据,不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。
数据接收方不再使用$on来得知数据变化,而是通过计算属性的特征被动接收。
解决的问题
通信组件需同时存在?数据在bus上存储,所以没有要求。
多次绑定?绑定监听都在bus上,不会重复绑定。
数据只在$emit后可用?使用计算属性直接读取存在bus上的值,不需要再次触发事件。
vue数据传递的特殊实现技巧的更多相关文章
- vue数据传递--我有特殊的实现技巧
最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...
- vue 数据传递的方法
组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值 组件实例的作用域是 ...
- [Unity3D]场景间切换与数据传递(以及物体删除技巧)
http://blog.163.com/kingmax_res/blog/static/77282442201031712216508/ 先介绍一些基本函数(具体用法自己查文档):---------- ...
- 剖析 Rails 3 MVC 中的数据传递
引用链接:https://www.ibm.com/developerworks/cn/web/1108_linhx_rails3mvc/ 如果读者已经开发过基于 Rails 的应用,但对其 MVC 间 ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- vue.js之数据传递和数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue再次入手(数据传递①)
准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...
随机推荐
- Mycat配置入门
配置: --bin 启动目录 --conf 配置文件存放配置文件: --server.xml:是Mycat服务器参数调整和用户授权的配置文件. --schema.xml:是逻辑库定义和表以及分片定义的 ...
- Confluence 6 连接一个目录
你可以添加下面类型的目录服务器和目录管理器: Confluence 的内部目录(Configuring the Internal Directory). Microsoft Active Direct ...
- PHP函数笔记
一.函数(Function) 1.什么是函数:封装的,可以重复使用的 完成特定功能的代码段. 2.分类 (1)系统函数 (2)自定义函数 3.自定义函数 ...
- POJ-1129 Channel Allocation (DFS)
Description When a radio station is broadcasting over a very large area, repeaters are used to retra ...
- juqery的一些简单用法
层级选择器(重点).基本过滤选择器 :eq(index) 选择匹配到的元素中索引号为index的一个元素,index从0开始 :odd 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 : ...
- C#窗体控件简介ListBox(需整理)
ListBox 控件 ListBox 控件又称列表框,它显示一个项目列表供用户选择.在列表框中,用户 一次可以选择一项,也可以选择多项. 1.常用属性: (1) Items属性: 用于存放列表框中的列 ...
- struts2整合axis2后,访问不到wsdl,被struts2拦截的解决办法
在struts2中整合axis2后,访问wsdl的时候显示404 not found There is no Action mapped for action name xxxxxxxx. 解决办法 ...
- Idea破解办法+idea免费生成注册码+jsp属性选择器+注解什么的都报错
Idea破解办法: http://blog.csdn.net/bitcarmanlee/article/details/54951589 idea免费生成注册码: http://idea.iteblo ...
- forget word qz_out_b1
1★ be bi prep 使~成为: 2★ bene b əni 好,善 :祈祷 3★ bi 2, 双重, 两个 bi 4★ by b æ / 通过,在~之前
- 火狐扒代码插件ScrapBook
ScrapBook这个火狐插件很好用,但偶尔用下,不经常使用,是仿站扒代码的前端利器.