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

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

vuex

不介绍,数据量和复杂度达不到不用它你才会向下看。

props

父子组件传值,官方api,只写个demo。

1.父组件

<son :info="info" @update="updateHandler"/>

// data
info: 'sendToSon' // methods
updateHandler (newVal) {
this.info = newVal
}

  

2.子组件

// props
props: ['info'] // 向上传值,某个方法中使用
this.$emit('update', 'got')

父向子传值-->props 子向父传值-->子组件绑定事件回调定义在父组件,子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props,需使用自定义事件。

eventBus

bus皆为导入的bus实例

// bus
const bus = new Vue() // 数据接收组件 // 当前组件接收值则 bus.$on('event1', (val)=>{}) // 数据发出组件 // 当前组件发出值则 bus.$emit('event1', val)

可以看出本质是一个vue实例充当事件绑定的媒介。 在所有实例中使用其进行数据的通信。

双(多)方使用同名事件进行沟通。

问题

  1. $emit时,必须已经 $on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的。(注:路由切换时,新路由组件先 created,旧路由组件再destoryed,部分情况可以分别写入这两个生命周期,见此问题)。

  2. $on在组件销毁后不会自动解除绑定,若同一组件多次生成则会多次绑定事件,则会一次 $emit,多次响应,需额外处理。

  3. 数据非“长效”数据,无法保存,只在 $emit后生效。

所以是否有一种更适用的方案呢?

特殊的eventBus?

我们先来看个代码,线上代码。 bus皆为导入的bus实例。

// 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
}
}

  

不同

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

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

解决的问题

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

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

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

探讨

为什么使用计算属性

其实应该是为什么不能直接添加到data上,如 data1: bus.data1?我们可以再看一段代码,线上代码。 将bus修改为

data () {
return {
// 多一层结构
val: {
result: 0
}
}
},
created () {
this.$on('update1', val => {
console.log('触发1', i1++)
this.val.result = val
})
}

数据接收组件改为

// template
data中获取直接修改值:{{dataResult}}
data中获取直接修改值的父层:{{dataVal}}
computed中依赖直接修改值:{{computedResult}}
// js
data () {
return {
// 获取直接修改值
dataResult: bus.val.result,
// 获取直接修改值的父层
dataVal: bus.val
}
},
computed: {
computedResult () {
// 依赖直接修改值
return bus.val.result
}
}

可以看到,data中获取直接修改值值的数据是无法动态响应的。

为什么要用事件

其实不用 $emit触发,使用 bus.val = 1直接赋值也是可以的,那么为什么不这么做呢?

简化版的vuex

其实这种eventBus就是简化版的vuex。 vue文档中有这样一段话:

组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变。

store对应 bus实例, state对应 data, action对应 事件, dispatch对应 $emit。 同时vuex中组件获取数据的方式正是通过计算属性,那么其实vuexFlux架构的理解和使用也没有那么难不是吗

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

  1. vue 数据传递的方法

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

  2. vue数据传递的特殊实现技巧

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

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

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

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

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

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

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

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

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

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

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

  8. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  9. vue 2.x之组件的数据传递(一)

    这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...

随机推荐

  1. 【模考】2018.04.08 Connection

    Description 给定一张N个点M条边的连通无向图,问最少需要断开多少条边使得这张图不再连通. Input 第一行两个整数N,M含义如题所示. 接下来M行,每行两个正整数x,y,表示x和y之间有 ...

  2. [AT2148] [arc063_c] Integers on a Tree

    题目链接 AtCoder:https://arc063.contest.atcoder.jp/tasks/arc063_c 洛谷:https://www.luogu.org/problemnew/sh ...

  3. struts2拦截器和过滤器区别

    1.拦截器是基于java反射机制的,而过滤器是基于函数回调的.2.过滤器依赖于servlet容器,而拦截器不依赖于servlet容器.3.拦截器只能对Action请求起作用,而过滤器则可以对几乎所有请 ...

  4. django 表单验证和字段验证

    表单验证和字段验证 表单验证发生在数据验证之后.如果你需要自定义这个过程,有几个不同的地方可以修改,每个地方的目的不一样.表单处理过程中要运行三种类别的验证方法.它们通常在你调用表单的is_valid ...

  5. poj2549 Sumsets

    Sumsets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11886   Accepted: 3273 Descript ...

  6. 「Python」socket指南

    开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...

  7. HTML+css零碎小知识

    1.设置了float浮动的元素和绝对定位position:absolute的元素会脱离正常的文档流.但是设置absolute的元素不会占据空间,相当于隐形了.   2.相对定位position:rel ...

  8. mysql \G

    mysql 命令区分大小写.ego       (\G) Send command to mysql server, display result vertically. go        (\g) ...

  9. hdu 4055 Number String

    Number String http://acm.hdu.edu.cn/showproblem.php?pid=4055 Time Limit: 10000/5000 MS (Java/Others) ...

  10. 51nod 1548 欧姆诺姆和糖果 (制约关系优化枚举)

    1548 欧姆诺姆和糖果 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 一天,欧姆诺诺姆来到了朋友家里,他发现了 ...