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

Posted 2020-10-22 coffeelovetea

最近碰到了比较多的关于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上的值，不需要再次触发事件。