vue之bus总线简单使用讲解
更新时间：2021年09月13日 14:40:45 作者：牛先森家的牛奶
这篇文章主要介绍了vue之bus总线简单使用讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
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')
到此这篇关于vue之bus总线简单使用讲解的文章就介绍到这了,更多相关vue之bus总线简单使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue中每个组件都是隔离的,包括父组件和子组件,各组件之间需要数据通信,就涉及到了组件传值,本文给大家介绍vue中组件间多种传值方式案例,感兴趣的朋友跟随小编一起看看吧2024-03-03
关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了vue 二维码长按保存和复制内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue无法读取HTMLCollection列表的length问题解决
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Nuxt.js 静态资源和打包的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了详解Vue中watch对象内属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最近在学习Vue,感觉methods还是有必有总结一下的,下面这篇文章主要给大家介绍了关于3分钟迅速学会Vue中methods方法使用技巧的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vue部署到域名二级目录刷新404的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论