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

前言

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

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

vuex

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

props

demo

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

1.父组件

<son :info="info" @update="updateHandler"/>// datainfo: 'sendToSon'// methodsupdateHandler (newVal) { this.info = newVal}

2.子组件

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

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

限制

父子组件。

eventBus

demo

bus皆为导入的bus实例

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

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

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

问题

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

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

特殊的eventBus？

demo

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

// busconst 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只是用来绑定和触发事件，并不关心数据，不与数据发生交集。而这个方案多一步将数据直接添加在bus实例上。且事件监听与数据添加需提前定义好。 数据接收方不再使用$on来得知数据变化，而是通过计算属性的特征被动接收。