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

Vue2 第十五节 组件间通信方式

1.组件的自定义事件

2.全局事件总线

3.消息订阅与发布

一.组件的自定义事件

1.1 绑定自定义事件

① 自定义事件就是一种组件间通信方式,用于子组件和父组件之间传递数据

② props来实现子组件给父组件传递数据

(1)先给父组件中绑定一个函数

(2)子组件中用props接收

(3)在子组件中调用这个方法

 ③ 绑定一个自定义事件

  第一种写法: 

(1)事件绑定(在父组件中绑定)

<Student v-on:atguigu="getStudentName" />

第二种写法:(更加灵活)

(1)使用ref的方式

<Student ref="student" />

④ 触发事件(在子组件中触发)

this.$emit('atguigu', this.name, 1, 2, 3)

⑤ 自定义事件只想触发一次:

第一种方式写法:

<Student @atguigu.once="getStudentName" />

第二种方式写法:

this.$refs.student.$once('atguigu', this.getStudentName)

1.2 解绑自定义事件

① 解绑一个自定义事件

this.$off('atguigu')

② 解绑多个自定义事件

this.$off(['atguigu', 'demo'])

③ 解绑所有的自定义事件

this.$off()

1.3 注意事项

① 通过 this.$ref.xxx.on('atguigu', 回调)绑定自定义事件时,回调要么配置在 methods 中,要么用箭头函数,否则 this 的指向会出问题,因为这个回调函数中的this指向的是触发这个事件的组件,并不是接收这个事件的组件

② 组件上也可以绑定原生DOM事件,需要使用native修饰符

<Student ref="student" @click.native="show" />

二. 全局事件总线

① 组件间通信的一种方式,适用于任意组件间通信

② 安装全局事件总线

new Vue({
beforeCreate(){
Vue.prototype.$bus = this
},
})

③ 事件总线接收数据

④ 事件总线解绑

 ⑤ 分发事件

三. 消息订阅与发布

① 消息订阅与发布是组件间通信的方式,适用于任意组件间通信

② 需要引入一个消息订阅与发布的第三方实现库:PubSubJS

下载: npm install -S pubsub-js

引入: import pubsub from 'pubsub-js'

③ 过程:订阅消息(对应绑定事件监听),  发布消息(分发事件),取消消息订阅(解绑事件监听)

代码示例

(1)订阅消息

  msg是消息名,data是数据

 (2)发布消息

 (3)取消订阅:最好在beforeDestroy钩子中取消订阅

相关文章:

Vue2 第十五节 组件间通信方式

1.组件的自定义事件 2.全局事件总线 3.消息订阅与发布 一.组件的自定义事件 1.1 绑定自定义事件 ① 自定义事件就是一种组件间通信方式&#xff0c;用于子组件和父组件之间传递数据 ② props来实现子组件给父组件传递数据 &#xff08;1&#xff09;先给父组件中绑定一个…...

maven的下载与安装

文章目录 1 官网下载地址2 设置环境变量3 设置仓库地址4 添加阿里云的中央镜像 1 官网下载地址 https://maven.apache.org/ 下载 2 设置环境变量 MAVEN_HOME PATH mvn -v验证 3 设置仓库地址 仓库地址 4 添加阿里云的中央镜像 阿里云中央镜像...

BroadcastChannel 实现浏览器tab无刷新通讯

前提须知 使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的BroadcastChannel 支持多tab间通讯mdn 链接 具体使用 发送方使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewpor…...

98. Python基础教程:try...except...finally语句

【目录】 文章目录 1. try...except...finally语法介绍2. try...except...finally执行顺序3. 捕获特定类型的异常4. 捕获所有类型的异常5. 实操练习-打开txt文件并输出文件内容 【正文】 在今天的课程中&#xff0c;我们将学习Python中的异常处理语句try...except...finally。 …...

c语言实现简单的tcp客户端

功能&#xff1a;实现一个简单的tcp客户端&#xff0c;连接本地端口8888的tcp服务端&#xff0c;并发送一条报文。 /* * File: main.c* Author: vincent** Created on 2023年8月3日, 上午9:56*/#include <stdio.h> #include <stdlib.h> #include <string.h…...

RocketMQ详解及注意事项

RocketMQ是阿里巴巴开源的一款分布式消息中间件&#xff0c;具有高吞吐量、高可用性、可扩展性和稳定性强等特点&#xff0c;广泛应用于异步消息、应用解耦、流量削峰填谷等场景。本文将详细介绍RocketMQ的基本架构、工作流程、消息模型&#xff0c;并列出在使用RocketMQ时需要…...

选择适合的项目管理系统,了解有哪些选择和推荐

随着科技的进步和全球竞争的加剧&#xff0c;项目管理已经成为企业成功的关键要素。为了更好地组织和监控项目&#xff0c;许多企业和组织正在采用项目管理系统(PMS)。本文将探讨项目管理系统的主要组成部分以及其在实际应用中的优势。 “项目管理系统有哪些?国际上比较常见的…...

linux基础命令-cd

切换当前工作目录使用 cd 命令 在 Linux 操作系统中&#xff0c;cd 是一个常用的命令&#xff0c;用于切换当前的工作目录。工作目录是用户当前所在的文件夹&#xff0c;执行命令时将会在该目录中进行操作。cd 命令的功能是更改当前工作目录到指定的目录位置。在本文中&#xf…...

MySQL数据库分库分表备份

分库备份 创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash 备份的路径 bak_path/backup/db 账号密码 mysql_cmd-uroot -pRedHat123 需要排除的数据库 exclude_dbinformation_schema|mysql|performance_schema|sys 检验备份路径是否存在&#…...

PyTorch 中的累积梯度

https://stackoverflow.com/questions/62067400/understanding-accumulated-gradients-in-pytorch 有一个小的计算图&#xff0c;两次前向梯度累积的结果&#xff0c;可以看到梯度是严格相等的。 代码&#xff1a; import numpy as np import torchclass ExampleLinear(torch…...

【面试精品】运维工程师需要具备的核心能力有哪些?

运维&#xff0c;在部分没有接触过IT的小伙伴的概念中觉得是一个比较低级的职位&#xff0c;很容易从字面理解为运营、维护. 很多朋友认为&#xff0c;无论IDC机房运维、网络运维、桌面运维、Linux系统运维、数据库运维、云计算运维、等在互联网公司中的工作就是安装系统&…...

微服务实战项目-学成在线-选课学习(支付与学习中心)模块

微服务实战项目-学成在线-选课学习(支付与学习中心)模块 1 模块需求分析 1.1 模块介绍 本模块实现了学生选课、下单支付、学习的整体流程。 网站的课程有免费和收费两种&#xff0c;对于免费课程学生选课后可直接学习&#xff0c;对于收费课程学生需要下单且支付成功方可选…...

postman和jmeter的区别何在?

小伙伴们大家好呀&#xff0c;前段时间笔者做了一个小调查&#xff0c;发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中&#xff0c;有高手&#xff0c;自然也会有小白&#xff0c;但有一点我们无法否认&#xff0c;就是每一个高手都是从小白开始的&#xf…...

maven安装(windows)

环境 maven&#xff1a;Apache Maven 3.5.2 jdk环境&#xff1a;jdk 1.8.0_192 系统版本&#xff1a;win10 一、安装 apache官网下载需要的版本&#xff0c;然后解压缩&#xff0c;解压路径尽量不要有空格和中文 官网下载地址 https://maven.apache.org/download.cgihttps:…...

自学安全卷不动,是放弃还是继续?

有天我想去搜一下怎么约女孩子看电影比较不油腻的时候&#xff0c;突然看到一个话题“自学网络安全的人都是什么感受”。 因为我的粉丝们大部分都是在自学或者是准备入行的大学生&#xff0c;所以我很认真一个一个去看了下别人的回答。基本都是劝退自学为主&#xff0c;因为自学…...

Django实现音乐网站 ⑶

使用Python Django框架制作一个音乐网站&#xff0c;在系列文章2的基础上继续开发&#xff0c;本篇主要是后台单曲、专辑、首页轮播图表模块开发。 目录 后台单曲、专辑表模块开发 表结构设计 单曲表&#xff08;singe&#xff09;结构 专辑表&#xff08;album&#xff09…...

(13) Qt事件系统(two)

目录 事件分发函数 无边框窗口拖动 自定义事件 发送事件的函数 自定义事件 系统定义的事件号 自定义事件号 自定义事件类 发送和处理事件 sendEvent与postEvent的区别 栈区对象 堆区对象 事件传播机制 事件传播的过程 事件传播到父组件 鼠标单击事件与按钮单击信…...

PHP的知识概要

PHP技术基础 1、PHP是Hypertext Preprocessor的缩写&#xff0c;是基于服务器端运行的脚本程序语言&#xff0c;可以实现数据库和网页之间的数据交互。PHP可以单独运行&#xff0c;也可镶嵌在HTML文件 中。它具有开发快速、性能稳定的优点。 2、PHP是嵌入式脚本语言&…...

JSON格式Python,Java,PHP等封装根据商品ID获取快手商品详情数据方法

快手商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据&#xff0c;您可以通过开放平台的接口或者直接访问快手商城的网页来获取商品详情信息。以下是两种常用方法的介绍&#xff1a; 1.…...

【ASP.NET MVC】MYSQL安装配置(4)

一、安装配置 1、下载MYSQL绿色版压缩包&#xff08;略&#xff09; 2、解压到目录&#xff0c;比如E:\mysql目录 3、设置环境变量 添加bin目录到path&#xff0c;方便运行Mysql的命令 先打开系统的《环境变量》配置 双击系统变量中的Path 添加Mysql的BIN目录到path: 4、在…...

Flash Memory技术解析与应用实践

1. Flash Memory技术全景解析作为一名嵌入式系统开发工程师&#xff0c;我使用Flash Memory已有十余年经验。从早期的NOR Flash烧录到现在的TLC NAND优化&#xff0c;这项技术始终是存储领域的核心支柱。让我们抛开教科书式的定义&#xff0c;从实际工程角度重新认识这项既熟悉…...

3步快速上手!终极缠论量化工具:基于TradingView本地SDK的几何交易可视化完整指南

3步快速上手&#xff01;终极缠论量化工具&#xff1a;基于TradingView本地SDK的几何交易可视化完整指南 【免费下载链接】chanvis 基于TradingView本地SDK的可视化前后端代码&#xff0c;适用于缠论量化研究&#xff0c;和其他的基于几何交易的量化研究。 缠论量化 摩尔缠论 缠…...

Windows ISO制作与补丁集成自动化工具实战指南:从手动操作到批量部署的效率革命

Windows ISO制作与补丁集成自动化工具实战指南&#xff1a;从手动操作到批量部署的效率革命 【免费下载链接】Win_ISO_Patching_Scripts Win_ISO_Patching_Scripts 项目地址: https://gitcode.com/gh_mirrors/wi/Win_ISO_Patching_Scripts 在数字化时代&#xff0c;系统…...

从YOLOv8到RTDETR:如何将训练后的YOLO指标无缝转换为COCO格式

1. 为什么需要YOLO到COCO格式转换 当你用YOLOv8官方代码训练RTDETR模型时&#xff0c;会发现评估结果默认输出的是YOLO格式指标。但学术界和工业界普遍采用COCO评估标准&#xff0c;这就好比在中国用人民币交易&#xff0c;到了欧洲就得换成欧元。我在去年帮某无人机公司做目标…...

基于Maxwell的750W内转子伺服电机设计:14极12槽优化方案解析

基于maxwwell设计的经典750W&#xff0c;3000RPM 内转子 私服电机&#xff0c;14极12槽&#xff0c;外径76 轴向长度56.7 &#xff0c;转矩1Nm,直流母线12V&#xff0c;辅助槽优化了齿槽转矩&#xff0c;特色是转子加工方便&#xff0c;永磁同步电机&#xff08;PMSM BLDC&…...

OpenCore Legacy Patcher终极指南:让老旧Mac焕发新生的完整方案

OpenCore Legacy Patcher终极指南&#xff1a;让老旧Mac焕发新生的完整方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher&#xf…...

终极RPA档案解析指南:unrpa工具的专业实现与优化策略

终极RPA档案解析指南&#xff1a;unrpa工具的专业实现与优化策略 【免费下载链接】unrpa A program to extract files from the RPA archive format. 项目地址: https://gitcode.com/gh_mirrors/un/unrpa 在RenPy视觉小说游戏开发与逆向工程领域&#xff0c;RPA档案格式…...

别再被空白页坑了!用html2canvas + print-js打印Vue/React组件,保姆级避坑指南

彻底解决前端组件打印难题&#xff1a;html2canvas与print-js深度整合实践 在管理后台、数据报表等企业级应用中&#xff0c;精确打印特定组件是刚需&#xff0c;但现代前端框架的组件化特性让这个"简单需求"变得异常棘手。当你的Vue/React组件在屏幕上完美呈现&…...

PyTorch 2.8镜像效果实测:Wan2.2-I2V图生视频在4090D上的流畅度表现

PyTorch 2.8镜像效果实测&#xff1a;Wan2.2-I2V图生视频在4090D上的流畅度表现 1. 测试环境与配置 1.1 硬件配置 本次测试使用的是基于RTX 4090D显卡的深度学习工作站&#xff0c;具体配置如下&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090D 24GB显存CPU&#xff1a;10核…...

2025届必备的六大AI辅助写作神器解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 处于人工智能技术基础之上的智能辅助系统&#xff0c;是可给学术研究者送去高效、规范的开题…...