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 绑定自定义事件 ① 自定义事件就是一种组件间通信方式,用于子组件和父组件之间传递数据 ② props来实现子组件给父组件传递数据 (1)先给父组件中绑定一个…...
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文件并输出文件内容 【正文】 在今天的课程中,我们将学习Python中的异常处理语句try...except...finally。 …...
c语言实现简单的tcp客户端
功能:实现一个简单的tcp客户端,连接本地端口8888的tcp服务端,并发送一条报文。 /* * File: main.c* Author: vincent** Created on 2023年8月3日, 上午9:56*/#include <stdio.h> #include <stdlib.h> #include <string.h…...
RocketMQ详解及注意事项
RocketMQ是阿里巴巴开源的一款分布式消息中间件,具有高吞吐量、高可用性、可扩展性和稳定性强等特点,广泛应用于异步消息、应用解耦、流量削峰填谷等场景。本文将详细介绍RocketMQ的基本架构、工作流程、消息模型,并列出在使用RocketMQ时需要…...
选择适合的项目管理系统,了解有哪些选择和推荐
随着科技的进步和全球竞争的加剧,项目管理已经成为企业成功的关键要素。为了更好地组织和监控项目,许多企业和组织正在采用项目管理系统(PMS)。本文将探讨项目管理系统的主要组成部分以及其在实际应用中的优势。 “项目管理系统有哪些?国际上比较常见的…...
linux基础命令-cd
切换当前工作目录使用 cd 命令 在 Linux 操作系统中,cd 是一个常用的命令,用于切换当前的工作目录。工作目录是用户当前所在的文件夹,执行命令时将会在该目录中进行操作。cd 命令的功能是更改当前工作目录到指定的目录位置。在本文中…...
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 有一个小的计算图,两次前向梯度累积的结果,可以看到梯度是严格相等的。 代码: import numpy as np import torchclass ExampleLinear(torch…...
【面试精品】运维工程师需要具备的核心能力有哪些?
运维,在部分没有接触过IT的小伙伴的概念中觉得是一个比较低级的职位,很容易从字面理解为运营、维护. 很多朋友认为,无论IDC机房运维、网络运维、桌面运维、Linux系统运维、数据库运维、云计算运维、等在互联网公司中的工作就是安装系统&…...
微服务实战项目-学成在线-选课学习(支付与学习中心)模块
微服务实战项目-学成在线-选课学习(支付与学习中心)模块 1 模块需求分析 1.1 模块介绍 本模块实现了学生选课、下单支付、学习的整体流程。 网站的课程有免费和收费两种,对于免费课程学生选课后可直接学习,对于收费课程学生需要下单且支付成功方可选…...
postman和jmeter的区别何在?
小伙伴们大家好呀,前段时间笔者做了一个小调查,发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中,有高手,自然也会有小白,但有一点我们无法否认,就是每一个高手都是从小白开始的…...
maven安装(windows)
环境 maven:Apache Maven 3.5.2 jdk环境:jdk 1.8.0_192 系统版本:win10 一、安装 apache官网下载需要的版本,然后解压缩,解压路径尽量不要有空格和中文 官网下载地址 https://maven.apache.org/download.cgihttps:…...
自学安全卷不动,是放弃还是继续?
有天我想去搜一下怎么约女孩子看电影比较不油腻的时候,突然看到一个话题“自学网络安全的人都是什么感受”。 因为我的粉丝们大部分都是在自学或者是准备入行的大学生,所以我很认真一个一个去看了下别人的回答。基本都是劝退自学为主,因为自学…...
Django实现音乐网站 ⑶
使用Python Django框架制作一个音乐网站,在系列文章2的基础上继续开发,本篇主要是后台单曲、专辑、首页轮播图表模块开发。 目录 后台单曲、专辑表模块开发 表结构设计 单曲表(singe)结构 专辑表(album)…...
(13) Qt事件系统(two)
目录 事件分发函数 无边框窗口拖动 自定义事件 发送事件的函数 自定义事件 系统定义的事件号 自定义事件号 自定义事件类 发送和处理事件 sendEvent与postEvent的区别 栈区对象 堆区对象 事件传播机制 事件传播的过程 事件传播到父组件 鼠标单击事件与按钮单击信…...
PHP的知识概要
PHP技术基础 1、PHP是Hypertext Preprocessor的缩写,是基于服务器端运行的脚本程序语言,可以实现数据库和网页之间的数据交互。PHP可以单独运行,也可镶嵌在HTML文件 中。它具有开发快速、性能稳定的优点。 2、PHP是嵌入式脚本语言&…...
JSON格式Python,Java,PHP等封装根据商品ID获取快手商品详情数据方法
快手商城是一个网上购物平台,售卖各类商品,包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据,您可以通过开放平台的接口或者直接访问快手商城的网页来获取商品详情信息。以下是两种常用方法的介绍: 1.…...
【ASP.NET MVC】MYSQL安装配置(4)
一、安装配置 1、下载MYSQL绿色版压缩包(略) 2、解压到目录,比如E:\mysql目录 3、设置环境变量 添加bin目录到path,方便运行Mysql的命令 先打开系统的《环境变量》配置 双击系统变量中的Path 添加Mysql的BIN目录到path: 4、在…...
揭秘冷轧精密带钢DC03-C340:3大核心特性如何赋能精密制造?
朋友们,今天咱们不聊虚的,就聊聊工厂车间里最实在的东西——材料。你是不是也遇到过这样的烦心事:花大价钱买回来的钢带,一上冲床就开裂,废品率居高不下;或者热处理后表面出现诡异的蓝线,抛光怎…...
【FMCW雷达】频率调制连续波FMCW雷达系统(从波形生成到利用小胞平均常误报率CA-CFAR进行目标检测)【含Matlab源码 15242期】含报告
💥💥💥💥💥💥💥💥💞💞💞💞💞💞💞💞💞Matlab武动乾坤博客之家💞…...
AI命理工具实测:主流大模型八字紫微能力对比及避坑指南
1. AI命理新风向:当大模型碰撞传统术数 最近身边刮起了一阵“AI命理”的热潮:做开发的朋友电脑里存着排盘工具包,运营岗的同事午休时在研究紫微斗数星曜含义,就连开策划会的间隙,都有人拿着AI输出的六爻结果讨论项目走…...
万象视界灵坛实操案例:博物馆数字藏品图像‘青铜器’‘唐三彩’‘水墨画’三级语义识别
万象视界灵坛实操案例:博物馆数字藏品图像青铜器唐三彩水墨画三级语义识别 1. 项目背景与价值 在博物馆数字化进程中,如何准确识别和分类各类文物图像是一个重要课题。传统基于标签的分类系统往往难以捕捉文物深层的艺术风格和文化内涵。 万象视界灵坛…...
ML.NET + 1-bit LLM:在 C# 上位机实现仅 1GB 内存的本地 AI 推理
文章目录上位机程序员的内存焦虑,谁懂啊1-bit LLM是个啥?把模型"压缩裤"穿到极致ML.NET:被遗忘的.NET AI利器实战:把BitNet塞进你的上位机路子一:ONNX Runtime桥梁(最正统)路子二&…...
cool-admin(midway版)数据导入模板:Excel模板设计与导出
cool-admin(midway版)数据导入模板:Excel模板设计与导出 【免费下载链接】cool-admin-midway 🔥 cool-admin(midway版)一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于midway.js 3.x、typ…...
TradingAgents-CN:基于多智能体LLM的中文金融交易决策框架技术指南
TradingAgents-CN:基于多智能体LLM的中文金融交易决策框架技术指南 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN 项目价值定位&…...
Python EXE逆向解密终极指南:从打包程序到源码还原完整教程
Python EXE逆向解密终极指南:从打包程序到源码还原完整教程 【免费下载链接】python-exe-unpacker A helper script for unpacking and decompiling EXEs compiled from python code. 项目地址: https://gitcode.com/gh_mirrors/py/python-exe-unpacker Pyt…...
探秘书匠策AI:毕业论文写作的“智慧引擎”
在学术探索的征途中,毕业论文如同一座巍峨的山峰,让无数学生既敬畏又向往。它不仅是对所学知识的综合检验,更是学术生涯的重要里程碑。然而,面对这座大山,许多人常常感到力不从心,选题迷茫、文献难觅、结构…...
StructBERT-WebUI部署案例:AI客服中台语义路由模块集成实践
StructBERT-WebUI部署案例:AI客服中台语义路由模块集成实践 1. 项目背景与价值 在现代AI客服系统中,语义理解是核心能力之一。当用户提出"我的订单怎么还没到"时,系统需要准确理解这其实是在询问"物流状态",…...
