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

VUE-组件间通信(三)全局事件总线

一、作用:任意组件间通信

二、实现

1、创建全局事件总线

new Vue({render: h => h(App),beforeCreate(){//创建全局事件总线Vue.prototype.$bus=this}
}).$mount('#app')

2、学生组件

触发事件

<template><div class="studentInfo"><h2>学生姓名: {{ name }}</h2><button @click="sendStudentNameToSchool">把学生名字给学校组件</button></div>
</template>
<script>
export default{name:'StudentInfo',data(){return {name:"张三",}},methods:{sendStudentNameToSchool(){//触发事件this.$bus.$emit('studentToSchool',this.name)}}
}
</script>

3、学校组件

监听事件

<template><div class="schoolInfo"><h2>学校名称: {{ name }}</h2></div>
</template>
<script>
export default{name:'SchoolInfo',data(){return {name:"大学",}},mounted(){//监听事件this.$bus.$on("studentToSchool",(data)=>{console.log('我是school组件,收到了学生传来的名字',data);})}
}
</script>

$on:监听事件,当某个自定义事件被触发时,通过on方法注册的回调函数将被执行。

4、效果

补充知识:

总线(Bus)是计算机各种功能部件之间传送信息的公共通信干线,它是由导线组成的传输线束, 按照计算机所传输的信息种类,计算机的总线可以划分为数据总线、地址总线和控制总线,分别用来传输数据、数据地址和控制信号。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • CAD二次开发IFoxCAD框架系列(25)- 自动加载和初始化的使用
  • 【flask】python框架flask的hello world
  • YOLOv8改进 | 主干篇 | YOLOv8引入EfficientViT替换Backbone
  • 行为识别实战第二天——Yolov5+SlowFast+deepsort: Action Detection(PytorchVideo)
  • 【算法每日一练及解题思路】计算以空格隔开的字符串的最后一个单词的长度
  • 1.【R语言】R语言的下载和安装
  • css中 display block属性的用法
  • 找单身狗(c语言)
  • 【论文阅读】通过使用实体增强框架融合多种多模态线索来改进假新闻检测
  • Kotlin 泛型小知识: `<T>`, `<out T>`, `<in T>` 的区别
  • Oracle查询优化--分区表建立/普通表转分区表
  • C++:string类(1)
  • 根DNS服务器
  • 【ROS2】PID控制
  • 2024上海初中生古诗文大会备考:单选题真题和每道题独家解析
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • create-react-app做的留言板
  • HTML中设置input等文本框为不可操作
  • Java 内存分配及垃圾回收机制初探
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • REST架构的思考
  • Theano - 导数
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • 后端_MYSQL
  • 每天一个设计模式之命令模式
  • 前端存储 - localStorage
  • 算法-图和图算法
  • gunicorn工作原理
  • ​HTTP与HTTPS:网络通信的安全卫士
  • ​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • #162 (Div. 2)
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (一)、python程序--模拟电脑鼠走迷宫
  • (一)Dubbo快速入门、介绍、使用
  • (转)Groupon前传:从10个月的失败作品修改,1个月找到成功
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • (最新)华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—(共12套)(每套四十题)
  • ******IT公司面试题汇总+优秀技术博客汇总
  • .NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法
  • .NET Core Web APi类库如何内嵌运行?
  • .net core webapi 部署iis_一键部署VS插件:让.NET开发者更幸福
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NET 读取 JSON格式的数据
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)
  • .NetCore项目nginx发布
  • .net分布式压力测试工具(Beetle.DT)
  • .NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
  • .net下的富文本编辑器FCKeditor的配置方法