Vue3组件通信

news2024/11/14 19:43:07

1、props

1.1 父传子

父组件:通过属性在子组件标签传递

子组件:通过defineProps接收

1.2 子传父

1.父组件先给子组件传递一个函数

2.子组件接收此参数(函数),并在合适的时机调用此函数,通过函数的参数,给父组件传递值。

2、自定义事件(子传父)

3、mitt

实现任意组件通信。

需要注意的是发送方和接收方,比如a给b发送数据:

  • 则a为发送方 ----需要触发事件(发送事件)---调用 emit
  • b为接收方    ----需要订阅事件(绑定事件) ---调用 on
3.1 定义

3.2 main.ts注入

3.3使用
  • on()
  • off()
  • emit()

3.4 实战- 任意组件间通信

3.4 总结

记住3个api即可,on,emit,off,在需要的时候emit发送事件并传递数据,使用on订阅事件并接收数据,组件卸载前再去注销事件即可。

4、v-model

4.1 如何在组件上面使用v-model

4.2 $event到底是什么 

5、$refs和$parents

需要配合defineExpose宏函数使用。

代码:

6、props

7、props

8、props

9、props

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

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

相关文章

SEO之网站结构优化(四)

初创企业搭建网站的朋友看1号文章;想学习云计算,怎么入门看2号文章谢谢支持: 1、我给不会敲代码又想搭建网站的人建议 2、新手上云 4、清晰导航 清晰的导航系统是网站设计的重要目标,对网站信息架构、用户体验影响重大。SEO也越来…

Hadoop高可用集群搭建及API调用

NameNode HA 背景 在Hadoop1中NameNode存在一个单点故障问题,如果NameNode所在的机器发生故障,整个集群就将不可用(Hadoop1中虽然有个SecorndaryNameNode,但是它并不是NameNode的备份,它只是NameNode的一个助理,协助NameNode工作,SecorndaryNameNode会对fsimage和edits文…

【BUG】已解决:OSError: [Errno 22] Invalid argument

已解决:OSError: [Errno 22] Invalid argument 目录 已解决:OSError: [Errno 22] Invalid argument 【常见模块错误】 错误原因: 解决方法如下: 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&…

基于luckysheet实现在线电子表格和Excel在线预览

概述 本文基于luckysheet实现在线的电子表格,并基于luckyexcel实现excel文件的导入和在线预览。 效果 实现 1. luckysheet介绍 Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。 官方文档在线Demo 2. 实现 …

配置单区域OSPF

目录 引言 一、搭建基础网络 1.1 配置网络拓扑图如下 1.2 IP地址表 二、测试每个网段都能单独连通 2.1 PC0 ping通Router1所有接口 2.2 PC1 ping通Router1所有接口 2.3 PC2 ping通Router2所有接口 2.4 PC3 ping通Router2所有接口 2.5 PC4 ping通Router3所有接口 2.…

力扣 28找到字符串中第一个匹配项的下标 KMP算法

思路: 朴素匹配有很多步骤是多余的 KMP算法能够避免重复匹配 KMP算法主要是根据子串生成的next数组作为回退的依据,它记录了模式串与主串(文本串)不匹配的时候,模式串应该从哪里开始重新匹配。 这里讲一下为什么用模式串的最大公共前后缀…

基于python的当当二手书数据分析与可视化系统设计与实现

1.1 研究背景及现状 1.1.1 研究背景 生态文明建设是我国的基本国情之一,资源利用作为应该重要的环节[1]。然而随着大学校园内掀起倡导的低碳环保热潮,高校学生教材及其他书籍的目前的处理方式已被大多人所关注[2]。从循环利用资源的角度出发[3]&…

封装MAVSDK为JAR包并导出给其它Android工程用完整示例

效果: 未解锁状态 已执行解锁指令 已执行起飞指令 飞行中 已执行降落指令 已执行返航指令 实现步骤: 1.准备PX4容器并启动:

Java项目中整合多个pdf合并为一个pdf

一、Java项目中整合多个pdf合并为一个pdf gitee笔记路径&#xff1a;https://gitee.com/happy_sad/drools一、依赖导入 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.6</version> …

AtCoder Beginner Contest 362

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;彩笔ACMer一枚。 &#x1f3c0;所属专栏&#xff1a;Codeforces 本文用于记录回顾总结本彩笔的解题思路便于加深理解。 比赛题目地址&#xff1a;AtCoder Beginner Contest 362 …

【保卫花果山】游戏

游戏介绍 拯救花果山是一款玩家能够进行趣味闯关的休闲类游戏。拯救花果山中玩家需要保护花果山的猴子&#xff0c;利用各种道具来防御妖魔鬼怪的入侵&#xff0c;游戏中玩家需要面对的场景非常的多样&#xff0c;要找到各种应对敌人的方法。拯救花果山里玩家可以不断的进行闯…

vue基于Cookies实现记住密码自动登录功能

vue基于Cookies实现记住密码自动登录功能 Cookies 和localStorage存储比对 实现记住密码功能时&#xff0c;使用 Cookies 和使用 localStorage 各有其优势和考虑因素&#xff0c;具体需要取决于需求和安全考量&#xff1a; 1、Cookies 的优势&#xff1a; 广泛支持&#x…

中介者模式详解:概念、优点及实例

目录 中介者模式中介者模式结构中介者模式适用场景中介者模式优缺点练手题目题目描述输入描述输出描述题解 中介者模式 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者…

windows ssh的登录,私钥权限太开放 WARNING: UNPROTECTED PRIVATE KEY FILE!

问题描述 ssh -i wang -D localhost:1080 wangsg.ks99.topBad permissions. Try removing permissions for user Permissions for xxx are too open. F:\pms\pms-gpg-key\ssh-key\wang>ssh -i wang -D localhost:1080 wangsg.ks99.top Bad permissions. Try removing perm…

查看公网IP的网络出口

文章目录 背景 背景 有时候在各种交易或其他时候&#xff0c;会被问到给我一个公网IP&#xff0c;我来帮你加白名单。 这个怎么怎么获取公网IP呢&#xff0c;在自己本机查看ipconfig或者ifconfig ip a 等命令查到的一般都是局域网的IP&#xff0c;每台机器都需要一个IP来进行对…

【文档智能 RAG】RAG新基建-RAG性能增强关键技术点及通用文档解析工具-TextIn

前言 在私有领域知识问答和企业知识管理领域&#xff0c;结合检索增强型生成模型&#xff08;Retrieval-Augmented Generation, RAG&#xff09;大模型&#xff08;Large Language Model, LLM&#xff09;已成为一种趋势。然而&#xff0c;在RAG系统的文档预处理阶段和检索阶段…

【Elasticsearch7】3-基本操作

目录 RESTful 数据格式 HTTP操作 索引操作 倒排索引 创建索引 查看所有索引 查看单个索引 删除索引 文档操作 创建文档 查看文档 ​编辑 全量修改 ​编辑局部修改 删除文档 条件删除文档 高级查询 条件查询 URL带参查询 请求体带参查询 带请求体方式的查…

STM32的ADC详解

目录 一、ADC简介 二、ADC的时钟 三、ADC特性 四、ADC功能说明 五、规则通道和注入通道 1.规则通道 2.注入通道 3.区别 六、数据寄存器 1.右对齐 2.左对齐 七、转换模式 1.单次转换模式 2.续转换模式 3.扫描模式 4.区别 八、程序实现 1.需求 2.ADC初始化 3.A…

InfiniBand网络-赋能高性能计算的卓越引擎

InfiniBand&#xff1a;赋能高性能计算网络的卓越引擎 InfiniBand作为一种先进的内网计算平台&#xff0c;已成为驱动高性能计算&#xff08;HPC&#xff09;、人工智能&#xff08;AI&#xff09;以及超大规模云基础设施演进的核心力量&#xff0c;其展现出无可比拟的性能优势…

mongodb数据导出与导入

一、先去检查mongodump mongodump --version 如果报 mongodump version: built-without-version-string 或者其他的较老的版本&#xff0c;直接去下载最新的【传送门】 【以Ubuntu18.04为例】 安装工具 假设你下载的是 .tgz 文件&#xff08;适用于 Linux 系统&#xff09;&am…