Vue数据传递--教你特殊的实现技巧

原创 年树先生 随笔 vue 16000阅读 2018-12-13 17:26:12 举报

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

vuex

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

props
demo

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

1.父组件

2.子组件

父向子传值-->props 子向父传值-->子组件绑定事件回调定义在父组件,子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props,需使用自定义事件。
限制
父子组件。
eventBus
demo
bus皆为导入的bus实例

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

问题

$emit时,必须已经 $on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的。(注:路由切换时,新路由组件先 created,旧路由组件再destoryed,部分情况可以分别写入这两个生命周期,见此问题)。
$on在组件销毁后不会自动解除绑定,若同一组件多次生成则会多次绑定事件,则会一次 $emit,多次响应,需额外处理。
数据非“长效”数据,无法保存,只在 $emit后生效。
所以是否有一种更适用的方案呢?
特殊的eventBus?

demo

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

  • 不同
    正统的eventBus只是用来绑定和触发事件,并不关心数据,不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。
    数据接收方不再使用$on来得知数据变化,而是通过计算属性的特征被动接收。
    解决的问题
    通信组件需同时存在?数据在bus上存储,所以没有要求。
    多次绑定?绑定监听都在bus上,不会重复绑定。
    数据只在$emit后可用?使用计算属性直接读取存在bus上的值,不需要再次触发事件。
  • 探讨
    为什么使用计算属性
    其实应该是为什么不能直接添加到data上,如 data1: bus.data1?我们可以再看一段代码,线上代码。 将bus修改为

数据接收组件改为

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

为什么要用事件

其实不用$emit触发,使用 bus.val = 1直接赋值也是可以的,那么为什么不这么做呢?
简化版的vuex
其实这种eventBus就是简化版的vuex。 vue文档中有这样一段话:
组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变。
store对应 bus实例,state对应 dataaction对应 事件, dispatch对应$emit。 同时vuex中组件获取数据的方式正是通过计算属性,那么其实vuex和Flux架构的理解和使用也没有那么难不是吗。

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复