基于vue的换肤功能的示例代码(3)

日期：2020-05-21 栏目：程序人生浏览：次

// 假装调用接口设置颜色
  chooseColor (color) {
   this.$axios.get('./static/api.json')
    .then((data) => {
     this.$bus.$emit('set-theme', color)
     this.changColor = false
     localStorage.setItem('themeColor', color)
    })
    .catch((data) => {
     console.log(data)
    })
  }

6 事件巴士的运用

在上一步最后我们有个关键的东西没完成， this.$bus.$emit('set-theme', color) ，将选取的颜色设置到全局，我的代码结构是这样的

子组件

<setColor> 是 home 页面的一个子组件，而在一开始我们已经说了，我们想在我们在app.vue (home.vue和其他view的父组件）里面定义一个color变量，派发到各个view组件里面去。于是这其实就是个，从 setColor 触发 app.vue 的设置颜色事件，子组件向父组件通信的问题。

我们可以很直接地用绑定事件配合 emit() 的做法，在 app.vue 定义一个 setglobalColor 方法，并绑定到router-view(包含了home.vue)，接着在home组件继续定义一个 setglobalColor 方法，实现的功能就是 emit('setglobalColor') 去触发app.vue的方法，并把 home.vue 的这个 setglobalColor 继续绑定到组件，组件里面点选颜色时候，直接emit这个方法就行了。

为什么我想用事件巴士.vue 的事件巴士和 vuex，在一些有追求的程序员手里总是小心翼翼的，我也一样，因为作为涉及全局的东西，一般觉得能不用就不用，代码能精简就精简，我们经常用一个词，不提倡。

可是有朝一日我经常在想，代码的可读性可维护性，和性能以及“风险”相对比，到底哪个更重要。对于事件巴士和vuex 这类全局性质的方案的主要担忧大部分在于，他们是全局的，可能因为一个事件名变量名一致就造成冲突，在小型项目还会造成冗余和额外开销。但事实上，事件和变量的命名我们都可以通过约定去规范，而在表现上，使用了事件巴士和vuex的项目，在性能上和直接 props 传递数据，emit 回调事件的项目相比，其实并没有太大区别，反而是无止境的 props 和 emit ，给人一种麻烦难以维护的感觉。像上述的 setglobalColor , 仅仅是跨越了两层组件，过程就显得繁琐了。所以我建议在出现两级以上组件层次，数据流稍微多的项目中都可以这么去做，定义一个全局的事件巴士

export default (Vue) => {
 let eventHub = new Vue()
 Vue.prototype.$bus = {
  $on (...arg) {
   eventHub.$on(...arg)
  },
  $off (...arg) {
   eventHub.$off(...arg)
  },
  $emit (...arg) {
   eventHub.$emit(...arg)
  }
 }
}

将事件巴士绑定到当前vue对象，使用时候只需要:

转载注明出处：http://www.heiqu.com/6129.html

基于vue的换肤功能的示例代码(3)

相关推荐