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

news2024/11/26 9:38:25

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

二、实现

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2092566.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(备份)常用ASCII 8*8 点阵 以及查询显示字符的点阵

图片 #include "driver/spi_master.h" #include "driver/gpio.h" #include "freertos/FreeRTOS.h" #include "freertos/task.h" #include "string.h" #include "driver/i2c.h" #include "esp_rom_sys.h"…

【postman如何生成python代码】

postman如何生成python代码 https://jingyan.baidu.com/article/86fae3461577c27d48121ad1.html

【大模型系列篇】词向量 - 从Word2Vec到ELMo

&#x1f525;&#x1f525;&#x1f525;首先安利一个比较不错的忍不住就想一键三连的大模型科普: 大模型科普专栏 - AI老兵文哲&#xff08;哔哩哔哩&#xff09; 词向量&#xff08;又叫词嵌入&#xff09;已经成为NLP领域各种任务的必备一步&#xff0c;而且随着BERT、GPT等…

JS打造一款你自己的专用字体:使用p5.js与JavaScript实现

前言 在最近的生成艺术项目中遇到一个小问题&#xff1a;如何在作品中优雅地添加文本元素&#xff0c;同时避免使用网络字体&#xff0c;要么侵权要么花钱~~给项目增加不必要的负担&#xff0c;我决定不走寻常路&#xff0c;自己动手&#xff0c;丰衣足食&#xff0c;用JS打造…

C++11 新特性基础

前言 C11是继&#xff0c;C98/03之后的最大的一次更新&#xff0c;这次更新虽然花了很长的时间&#xff0c;但是真的推出了很多的干货&#xff01;本期内容开始我们将介绍C11常用的操作&#xff01; 目录 前言 一、C11介绍 二、统一的列表初始化 1、{}初始化 2、std::in…

【机器学习】循环神经网络(RNN)介绍

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 循环神经网络(RNN)介绍什么是RNN?RNN的基本原理递归神经网络单元前向传播反向传…

Ubuntu下安装和配置MQTT服务器Mosquitto

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的通信协议&#xff0c;设计用于物联网设备之间的低带宽、不稳定网络环境下的高效通信。MQTT允许设备通过发布&#xff08;publish&#xff09;和订阅&#xff08;subscribe&#xff09;模式进行消…

清华2024内地录取3500人,其中900多人是走这个政策进来的... ...

2024年&#xff0c; 清华大学共录取本科新生3800余人&#xff0c;其中内地学生3500余人&#xff0c;覆盖全国31个省份1000 多所生源中学;港澳台学生60余人&#xff0c;国际学生约230人。 大李露个脸 清华大学2024年新生数据 普通批提前批共录取1549人&#xff0c;占比44% 强基计…

火龙果检测-目标检测数据集(包括VOC格式、YOLO格式)

火龙果检测-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1NdRBsHnYCK9xZd7bzQoN5w?pwd779l 提取码&#xff1a;779l 数据集信息介绍&#xff1a; 共有 1106 张图像和一一对应的标注文件 标注…

macos OneNote 2016 for Mac 官方pkg下载地址 - macos 10.15 Catalion 可用Onenote版本官方下载地址

macos 10.15 Catalion 版本的系统已经无法正常从应用商店下载到可用的Onenote 应用,原因是版本不受支持, 而且onenote官方链接的应用商店地址https://apps.apple.com/us/app/microsoft-onenote/id784801555?mt12在中国地区也无法访问, 所以中国地区用户如果想使用onenote应用…

【云原生系列之SkyWalking的部署】

1、分布式链路追踪 1.1概念 在较大的web集群和微服务环境中&#xff0c;客户端的一次请求需要经过不同的模块&#xff0c;多个不同中间件&#xff0c;多个不同机器一起相互协作才能处理完成客户端的请求&#xff0c;而在这一系列的请求过程之中,处理流程可能是串行执行,也可能…

华为云征文|基于Flexus云服务器X实例之安装长亭雷池waf教程

&#x1f534;大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 先看这里 写在前面何为长亭雷池waf安装社区版雷池雷池环境要求查看华为云Flexus云服务器X实例的配置一条命令安装雷池waf检查查看是否安装成功 雷池使用登录雷池配置站点 写在…

51单片机.之ADC数字模拟转换

1、数字转模拟电路&#xff0c;输出波形&#xff0c;示波器采集来显示波形 单片机通过i2c给&#xff0c;模数转换器&#xff0c;写入数字信号&#xff0c;定时器1s扫描按键的切换 1、key.c 切换波形 #include <reg52.h>sbit KEY_IN_1 P2^4; sbit KEY_IN_2 P2^5; …

五、Selenium操作指南(一)

文章目录 一、基本用法&#xff08;一&#xff09;初始化浏览器对象&#xff08;二&#xff09;访问页面&#xff08;三&#xff09;设置浏览器大小&#xff08;四&#xff09;刷新页面&#xff08;五&#xff09;前进后退 二、获取页面基础属性三、定位页面元素&#xff08;一…

【QNX+Android虚拟化方案】112 - 获取 88Q5152 Switch Port1、Port2 端口的主从模式 / 传输速率 / 链路状态

【QNX+Android虚拟化方案】112 - 获取 88Q5152 Switch Port1、Port2 端口的主从模式 / 传输速率 / 链路状态 1. 读取 P1、P2 端口 主从模式 / 传输速率2. 读取 P1、P2 端口 Link Status3. 读取 P1、P2 端口 Duplex 全双工/半双工模式4. 读取 P1、P2 链路信号SQI质量5. 完整代码…

基于单片机的肺活量检测仪设计

本设计主要对其中的一种测量方法和原理进行介绍与运用&#xff0c;设计了一款基于STC12C5A60S2单片机的肺活量检测仪&#xff0c;包括供电模块、气流检测模块、按键模块、显示模块、语音输出模块和蓝牙模块&#xff0c;实现对肺活量的数值检测&#xff0c;并对数据进行语音播报…

linux固定ip

背景 VMware&#xff0c;centos7 查询 网关 linux指执行 ip addr 命令 拿到自动分配的ip : 192.168.150.102 [rootlocalhost ~]# cd /etc/sysconfig/network-scripts/ 执行: cd /etc/sysconfig/network-scripts/ 进入到network-scripts文件中 执行: vi ifcfg-ens33 编辑ifc…

PPT到PDF转换器:一个功能强大的Python GUI应用(unzip,convert,replace,merge)

在当今的数字时代,文档格式转换已成为一项常见需求。特别是将PowerPoint演示文稿转换为PDF格式,这不仅可以确保文档的一致性,还能方便分享和打印。今天,我们将深入探讨一个使用Python开发的强大GUI应用程序,它不仅可以将PPT转换为PDF,还具备文本替换、PDF处理和文件合并等多项功…

TDesign 微信小程序组件库配置

文章目录 1.安装 npm 包2. 构建 npm3. 构建完成后即可使用 npm 包。4.修改 app.json5.修改 tsconfig.json6.使用组件 1.安装 npm 包 在小程序 package.json 所在的目录中执行命令安装 npm 包&#xff1a; npm install结果报错 PS C:\WeChatProjects\miniprogram-1> npm i…

七、库存管理——调拨、预留业务

1、库存管理业务总览 2、转储过账和库存转移 3、转储过账 3.1 库存状态到库存状态&#xff08;类型较多&#xff09; 3.1.1 从质检库存转移到非限制使用库存 转储模式&#xff1a;事务类型A08&#xff08;转移过账&#xff09;凭证类型R10&#xff08;其他&#xff09;移动类…