脚本宝典收集整理的这篇文章主要介绍了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总线；
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')
到此这篇关于vue之bus总线简单使用讲解的文章就介绍到这了,更多相关vue之bus总线简单使用内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue之bus总线简单使用讲解全部内容，希望文章能够帮你解决vue之bus总线简单使用讲解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。