vue之bus总线简单使用讲解

213 阅读 0 评论 141 点赞

我是靠谱客的博主健忘蜗牛，这篇文章主要介绍vue之bus总线简单使用讲解，现在分享给大家，希望可以做个参考。

vue之bus总线的简单使用

场景描述：

A组件中包括B，C组件，而B组件中包括D组件，这时如果D组件想要在A组件中触发C组件的方法怎么办呢？

当然方案是有的，用状态管理vuex可以，用$emit传递也可以，但是我想试着用的是bus总线的方式；

如下：

D组件中触发bus的emit ，然后在A组件中用bus总线的on来触发方法；

D组件中

复制代码

1
2
3
4
5
dataLoad(){
   console.log('加载完触发事件');
   this.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('事件名称', 参数) // 第二个可以为参数
},

A组件中

复制代码

1
2
3
4
5
6
7
mounted() {
    // 监听item中数据加载完
    this.$bus.$on('itemDataLoad', () => {
      console.log('数据加载完');
    })
    // this.$bus.$on('事件名称', 回调函数(参数))
  },

当然在A组件中通过 this.$refs 的方式就可以触发C组件中的事件等

还有一步骤是 $bus 默认是不存在的啊，打印试试this.$bus为undefined啊；

别急，在main.js中加上$bus；

复制代码

1
2
// bus总线 vue实例
Vue.prototype.$bus = new Vue()

当然可以在生命周期中移除bus总线；

复制代码

1
this.$bus.$off();

记录封装的防抖函数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 防抖函数
  debounce: function (fun, delay) {
    let timer = null
    // 接收调用函数时传入的参数的值 ...args 可多个
    return function (...args) {
      if (tiemr) return
      timer = setTimeout(() => {
        fun.apply(this, args)
      }, delay);
    }
  }

const refresh = debounce(xxx, 500)

refresh('参数1', '参数2', '参数3')