vue之bus总线简单使用讲解
时间：2023-02-15 13:15:20|栏目：vue|点击： 次
vue之bus总线的简单使用
场景描述：
A组件中包括B，C组件，而B组件中包括D组件，这时如果D组件想要在A组件中触发C组件的方法怎么办呢？
当然方案是有的，用状态管理vuex可以，用$emit传递也可以，但是我想试着用的是bus总线的方式；
如下：
D组件中触发bus的emit ，然后在A组件中用bus总线的on来触发方法；
D组件中
dataLoad(){
console.log('加载完触发事件');
this.$bus.$emit('itemDataLoad')
// this.$bus.$emit('事件名称', 参数) // 第二个可以为参数
},
A组件中
mounted() {
// 监听item中数据加载完
this.$bus.$on('itemDataLoad', () => {
console.log('数据加载完');
})
// this.$bus.$on('事件名称', 回调函数(参数))
},
当然在A组件中通过 this.$refs 的方式就可以触发C组件中的事件等
还有一步骤是 $bus 默认是不存在的啊，打印试试this.$bus为undefined啊；
别急，在main.js中加上$bus；
// bus总线 vue实例 Vue.prototype.$bus = new Vue()
当然可以在生命周期中移除bus总线；
this.$bus.$off();
记录封装的防抖函数
// 防抖函数
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')
