vue之bus总线的简单使用解读
作者:牛先森家的牛奶 发布时间:2024-06-05 15:30:41
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')
bus总线的原理解析
关于官方介绍 从 Vue 1.x 迁移 — Vue.js
在官方文档中对bus总线的介绍是使用,但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值,bus总线应用在简单的项目
1.怎么理解bus总线
bus总线就是一个中间组件,触发事件,触发中间组件,监听中间组件的变化
2.bus组件存在的条件和注册
1.所有组件都可以访问
2.可以使用$emit,$on,$off
在项目过程中要满足这两点需求
1.所有组件都可访问
在vue的项目中,要所有组件都可以访问,那么一定在vue进行实例化之前就准备好,就是下图红色部分
2.可以使用$emit,$on,$off
有$emit,$on,$off的一定是vue的实例对象vc,或者vueComponent的实例对象vm
挂载到哪都可以访问?必然是原型上
vue.prototype.$bus = vue的实例对象/vueComponent的实例对象
第一种:
Vue.prototype.$bus = vueComponent的实例对象(所有的vueComponent的实例对象都是(Vue.extentd构造的)
第二种:
在生命周期创建之前 Vue.prototype.$bus = vue的实例对象
第三种:
利用插件进行挂载
安装 - npm install vue-bus
注册使用:
import VueBus from 'vue-bus';
Vue.use(VueBus)
3.使用
触发事件
this.$bus.$emit('事件名', 值)
监听事件
create() {
this.$bus.$on('事件名', (值) = > {
})
}
销毁事件
this.$bus.$off('事件名')
在理解bus总线的前提,是需要理解,为什么写在vue的原型上就可以访问?可以自行思考一下,涉及了一些vue的原理
来源:https://blog.csdn.net/weixin_42681295/article/details/119078712
猜你喜欢
- 喜欢用 Python 做项目的小伙伴不免会遇到这种情况:做图表时,用哪种好看又实用的可视化工具包呢?之前文章里出现过漂亮的图表时,也总有读者
- Python3中configparser模块简介configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字
- 本文实例讲述了golang实现unicode转换为字符串string的方法。分享给大家供大家参考,具体如下:package mainimpo
- <? // 建立一个指向新COM组件的索引 $word = new C
- 我在使用conda安装虚拟环境的过程中,下载一些包,比如torch等,发现在虚拟环境中有一份以外,pkgs文件夹下同样也会出现一份,大小一样
- 这里只列举了部分方法,其他方法或python库暂时还没使用到1.不用库,直接打印:代码样例:import time#demo1def pro
- 主旨在日常工作中,我们会经常且频繁的使用excel表格,那么我们是否可以通过python来操作excel表格,让其自动化的来代替我们的工作呢
- 电脑配置:Windows10,64位操作系统一、Anaconda的介绍Anaconda指的是一个开源的Python发行版本,其包含了cond
- 对称二叉树的含义非常容易理解,左右子树关于根节点对称,具体来讲,对于一颗对称二叉树的每一颗子树,以穿过根节点的直线为对称轴,左边子树的左节点
- 一、python中对文件、文件夹操作时经常用到的os模块和shutil模块常用方法。1.得到当前工作目录,即当前Python脚本工作的目录路
- 增加操作:变量名[key] = value # 通过key添加value值,如果key存在则覆盖 &nbs
- template中的_parse方法是模板文法的解析器,而这个文件中一坨一坨的各种node以及block,就是解析结果的承载者,也就是说在经
- 有一个比较有意思的传参方式:比如在 demo1.py 中指定 action='store_true'的时候:parser.a
- 自动发送邮件我们把报表做出来以后一般都是需要发给别人查看,对于一些每天需要发的报表或者是需要一次发送多份的报表,这个时候可以考虑借助Pyth
- 本文实例讲述了mysql外键的三种关系。分享给大家供大家参考,具体如下:因为有foreign key的约束,使得两张表形成了三种了关系:多对
- 在MySQL服务器启动时,它检查其命令行的操作,来查看它是否应该执行登录并打开相应的日志文件(如果应该的话)。可以让服务器生成两种主要类型的
- 1.使用render方法return render(request,'index.html') 返回的页面内容是index.
- 题目:汉诺塔给出最优解,如果对汉诺塔的定义有不了解,请翻看数据结构教材。除了最基本的之外,还有一题,给定一个数组,arr=[2,3,1,2,
- AngularJS 简介AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML
- 本文进通过实例,讲述通过 prototype 自定义方法的过程,旨在抛砖引玉,如果不对的地方,欢迎指正!prototype 是在 IE 4