当前位置: 首页 > article >正文

全局事件总线

全局事件总线作用就是实现组件间通信,就像对讲机一样

首先:我们如何让所有的组件都能访问到x,我们可以使用window绑定,但是发现以后我们都要依赖于window这个对象;还有种方式就是在vc它的源码上即,prototype上绑定;但这俩种方法都太麻烦了,因此我们可以在Vue.prototype绑定x,因为原型链的关系所有的vc实例都能访问到vue实例上的属性

 但是它是不具备$on,$off,$emit方法的,因为它只是一个object对象,它没有这个属性就要去找object原型对象中找这个属性,那肯定是没有的,为什么?因为像$on,$off,$emit都是vue这个原型对象上的方法

 

在beforeCreate事件中安装全局事件总线  Vue.prototype.$bus = this即 Vue.prototype.$bus = vm

为什么不写在外面,如果你在外面写的话,会导致组件已经创建好了,你才去绑定,你最终会没有绑定上的

 

用完之后要把这个总线解绑,因为这个总线是一种存在的

不然bus也太累了吧没了的东西还得背着 

总结:

全局事件总线(GlobalEventBus)

* 一种组件间通信的方式,适用于`<span style="color:red">`任意组件间通信。
* 安装全局事件总线:

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
	},
    ......
}) 

使用事件总线:

接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的`<span style="color:red">`回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

* 提供数据:``this.$bus.$emit('xxxx',数据)``
* 最好在beforeDestroy钩子中,用$off去解绑`<span style="color:red">`当前组件所用到的事件。要不然它身上的东西太多了

TodoList案例--全局事件总线

对App.vue和MyIitem.vue进行事件总线绑定

这俩个逐层传递

main.js里面设置一个全局总线

收数据的人去绑定事件总线上的自定义事件

 当出发了,就把它需要的函数传进去触发 

 触发$emit

最终效果跟之前一致了

 


http://www.kler.cn/a/4608.html

相关文章:

  • Vue.js组件开发-使用地图绘制轨迹
  • 怎么实现Redis的高可用?
  • 第R4周:LSTM-火灾温度预测
  • C#使用OpenTK绘制3D可拖动旋转图形三棱锥
  • dockerfile
  • html辅助标签与样式表
  • 区块链系统:签名
  • 带你弄明白c++的4种类型转换
  • 电商一站式管理后台必备工具:电商API接口,网络爬虫、数据抓取、批量处理订单
  • C++中常见的容器类使用方法举例(vector、deque、map、set)
  • 根据时间戳获取总用时(天时分秒)
  • VectorDraw Developer Framework 10.1003.1 Crack
  • 海心沙元宇宙音乐会虚拟主持人玩法再升级,虚拟动力技术全程助力
  • [powered with AI] 2023.3.24 考研英语学习 2014 英语二翻译
  • 如何使用 Python Pandas 更新行和列
  • 微信小程序实战:智能水印相机小程序开发附源码
  • 大文件分片上传的实现【前后台完整版】
  • 安装Maven、搭建Maven环境、使用Eclipse创建Maven工程
  • 基于springboot实现农机电招平台【源码+论文】分享
  • 大数加法【算法解析、代码模板、思路简单清晰】
  • 使用Vue脚手架(CLI)创建Vue项目并分析项目结构
  • JAVA入门(开发环境和一些概念)
  • 华为OD机试题,用 Java 解【自动曝光】问题 | 含解题说明
  • 【git】将本地项目同步到远程
  • keepalived
  • 【华为OD机试 2023最新 】 新员工座位(C++)