Vue3 组件之间传值
在 Vue3 中,组件之间的数据传递主要有以下几种方式,适用于不同的场景:
一、父组件向子组件传值:props
1. 子组件定义 props
<!-- ChildComponent.vue -->
<script setup>
// 组合式 API(推荐)
const props = defineProps({title: {type: String,default: '默认标题'},count: {type: Number,required: true}
});
</script><template><div>{{ title }} - {{ count }}</div>
</template>
<!-- 选项式 API -->
<script>
export default {props: {title: String,count: {type: Number,required: true}}
}
</script>
2. 父组件传递数据
<template><ChildComponent :title="'Hello Vue3'" :count="42"/>
</template>
二、子组件向父组件传值:emit
事件
1. 子组件触发事件
<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件function increment() {emit('updateCount', 10); // 触发事件并传递数据
}
</script><template><button @click="increment">增加计数</button>
</template>
2. 父组件监听事件
<template><ChildComponent :count="count"@updateCount="count = $event" <!-- 接收子组件传递的值 -->/>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
三、双向绑定:v-model
1. 子组件支持 v-model
<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);function updateValue(newValue) {emit('update:modelValue', newValue);
}
</script><template><input :value="modelValue" @input="updateValue($event.target.value)">
</template>
2. 父组件使用 v-model
<template><ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template><script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>
四、跨层级传值:provide
/ inject
1. 祖先组件提供数据
<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>
2. 后代组件注入数据
<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme'); // 注入数据
</script><template><div :class="theme">当前主题:{{ theme }}</div>
</template>
五、通过 Context 共享数据(如 Pinia 状态管理)
1. 安装 Pinia
npm install pinia
2. 创建 Store
// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});
3. 组件中使用 Store
<template><div>Count: {{ counterStore.count }}</div><button @click="counterStore.increment()">+1</button>
</template><script setup>
import { useCounterStore } from '@/stores/counter';const counterStore = useCounterStore();
</script>
总结:不同场景的传值方式
场景 | 方法 | 适用性 |
---|---|---|
父子组件直接通信 | props + emit | 父子层级明确,数据流单向 |
表单输入双向绑定 | v-model | 表单类组件(如输入框、下拉框) |
跨层级组件通信 | provide / inject | 深层次嵌套组件(如全局配置、主题) |
复杂应用状态共享 | Pinia / Vuex | 多组件共享状态(推荐中大型项目) |
推荐实践:
- 优先使用
props
和emit
实现父子通信。 - 简单双向绑定用
v-model
,复杂逻辑用事件。 - 跨层级或全局状态使用 Pinia。
- 避免过度依赖
provide
/inject
,可能导致组件耦合。
相关文章:
Vue3 组件之间传值
在 Vue3 中,组件之间的数据传递主要有以下几种方式,适用于不同的场景: 一、父组件向子组件传值:props 1. 子组件定义 props <!-- ChildComponent.vue --> <script setup> // 组合式 API(推荐)…...
深入理解用于中断控制的 NVIC 寄存器
NVIC 中有多个用于中断控制的寄存器(异常类型 16~255),这些寄存器位于系统控制空间(SCS)地址区域。下表是这些寄存器的概览: 除了软件触发寄存器(STIR)外,所有这些寄存器…...
Podman(Pod Manager)简介
Podman 简介 Podman(Pod Manager)是一个开源的容器管理工具,由红帽(Red Hat)开发,用于替代 Docker,支持运行、管理 OCI(Open Container Initiative)容器和容器镜像。它设…...
HarmonyOS NEXT端云一体化工程目录结构
视频课程学习报名入口:HarmonyOS NEXT端云一体化开发 端云一体化开发工程由端开发工程(Application)和云开发工程(CloudProgram)两大核心模块构成。 1)端开发工程目录结构 端开发工程主要用于开发应用端侧的业务代码,通用云开发模板的端开发工程目录结构如下图所示: …...
【C++ 真题】P1075 [NOIP 2012 普及组] 质因数分解
P1075 [NOIP 2012 普及组] 质因数分解 题目描述 已知正整数 n n n 是两个不同的质数的乘积,试求出两者中较大的那个质数。 输入格式 输入一个正整数 n n n。 输出格式 输出一个正整数 p p p,即较大的那个质数。 输入输出样例 #1 输入 #1 21输…...
力扣热题100,力扣148.排序链表力扣.26找出字符串中第一个匹配项的下标力扣146.LRU缓存序列管理器
目录 力扣148.排序链表 力扣.26找出字符串中第一个匹配项的下标 力扣146.LRU缓存 序列管理器 力扣148.排序链表 那个O1,暂时我没有考虑,但是这个nlogn,我就想什么时候会有log呢,应该是2的次幂方向思考,一说2,是否能想到2分呢&…...
防火墙高可靠性
防火墙高可靠性技术概述 防火墙高可靠性技术分为两类:设备高可靠性和链路高可靠性 防火墙双机热备 双机热备概述及相关协议 HRP协议:即Huawei Redundancy Protocol,主要用于实现防火墙双机之间关键配置命令和状态化信息的备份,…...
C++ stack对象创建、入栈、获取栈顶
stack对象创建直接调用C对应的<stack>,进行创建 #include<iostream> #include<stack>using namespace std;int main() {// 1 默认构造函数stack<int> stk1;// 2 拷贝构造函数stack<int> stk2;stk1 stk2;return 0;} 入栈操作有一条…...
x-cmd install | Pillager:Go 语言打造的敏感信息文件系统扫描利器
目录 Pillager 的独特优势安装Pillager 的应用场景Pillager 的核心功能 还在为文件系统中潜在的敏感信息泄露而担忧吗?Pillager 是一款由 Go 语言编写的强大工具,旨在帮助你轻松扫描文件系统,发现隐藏的密钥、密码、API 令牌等敏感信息。 Pil…...
第9.1讲、Tiny Encoder Transformer:极简文本分类与注意力可视化实战
项目简介 本项目实现了一个极简版的 Transformer Encoder 文本分类器,并通过 Streamlit 提供了交互式可视化界面。用户可以输入任意文本,实时查看模型的分类结果及注意力权重热力图,直观理解 Transformer 的内部机制。项目采用 HuggingFace …...
asp.net web form nlog的安装
一、安装NuGet包 核心包安装 NLog提供日志记录核心功能 NLog.Config自动生成默认配置文件模板 配置NLog文件 配置文件创建 项目根目录自动生成NLog.config文件(通过NuGet安装NLog.Config时创建) <?xml version"1.0" encoding&…...
定时器的两种实现方式
1、基于优先级队列/堆 队列是先进先出,优先级队列是优先级越高就存放在队列之前,我们可以将过期时间越早设置为优先级越高,那么临近过期时间的任务就会在队列前面,距离过期时间越晚的任务就在队列后面。 可以分配一个线程&#…...
2025.05.21华为暑期实习机考真题解析第一题
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. 智能云任务分发系统 问题描述 卢小姐负责一家云计算公司的任务分发系统开发。该系统需要根据任务优先级和到达顺序进行智能调度,支持以下两种操作: 添加任务 add task_id pri…...
计算机网络-MPLS VPN报文转发
上一章学习了MPSL VPN的路由交互过程,VPN间学习到路由之后可以进行报文的转发了。 一、MPLS VPN报文转发过程 以图中用户X的站点B访问站点A的192.168.1.0/24网段为例,报文转发过程如下: 1.CE3上存在到192.168.1.0/24网段路由,发…...
关于sql 查询性能优化的小经验
最近接到一些sql优化的任务。数据库类型:DB2 有一个长sql查询效率低,大概要几十秒,大概查询逻辑如下: select * from tableA a where exists (select 1 from tableB b where a.idb.id ) or exists (select 1 from tableC c whe…...
Pandas:数据分析步骤、分组函数groupby和基础画图
本文目录: 一、概念(一)数据分析的基本步骤(二)两个属性:loc[行标签,列标签 ] 和 iloc[行索引位置,列索引位置 ]1.基本规则2.两属性的相同和不同对比 二、加载数据(一)按列加载数据&…...
游戏引擎学习第302天:使用精灵边界进行排序
在 game_render_group.cpp 中:正确计算 GetBoundFor() 里的 SpriteBound 值 我们正在进行游戏的排序问题调试。虽然这是一个二维游戏,但包含一些三维元素,因此排序变得比较复杂和棘手。混合二维和三维元素时,需要依赖一些比较主观…...
【完整版】基于laravel开发的开源交易所源码|BTC交易所/ETH交易所/交易所/交易平台/撮合交易引擎
功能说明 源码简介与安装环境说明: 开源交易所,基于laravel开发的交易所 | BTC交易所 | ETH交易所 | 交易所 | 交易平台 | 撮合交易引擎。本项目有完整的撮合交易引擎源码、后台管理(后端前端)、前台(交易页面、活动页…...
DeepSeek赋能智能家居:构建高智能、低延迟的物联网生态
一、DeepSeek技术架构解析 DeepSeek采用分层架构设计,兼容边缘计算与云端协同,核心模块包括: 1. 设备接入层 多协议适配:支持MQTT、CoAP、Zigbee、WiFi等主流协议,内置设备描述语言(DDL)解析器,可自动发现并注册新设备。数据预处理:对传感器数据(如温度、光照、加速…...
鸿蒙开发:应用上架第二篇,申请发布证书
前言 本文基于Api13 通过第一篇文章,我们拿到了密钥库.p12文件和证书请求csr文件,这两个文件都是非常重要的,一定要保存好,我们也基本知道了应用的打包,签名信息文件是必须的,而对于签名信息,也…...
Android Framework开发环境搭建
本文分享下在Windows和ubuntu系统搭建framework 开发环境的过程。 Window系统版本win11 一.在windows搭建android framework开发环境。 到下面网站下载android studio 。 developer.android.google.cn/studio?hlzh-cn 在as 的sdk manager 中安装SDK Platform和SDK Tools。 2…...
关于收集 Android Telephony 网络信息的设计思考
需求 收集service state change、ims fail 等相关无线移动网络状态的信息,并保存,对外提供数据查询、删除、更新的功能。 架构设计与实现建议 1. 架构设计建议 针对在 Android Telephony 数据模块中实现网络状态信息收集并调用 Provider App 存储的需求,建议采用 分层的…...
弱网服务器群到底有什么用
在当今数字化的时代,大家都在追求高速、稳定的网络体验,但你是否想过,弱网服务器群其实也有着不可小觑的作用。让我们来聊聊什么是弱网服务器群。简单来说,它是一组在网络条件相对较差情况下运行的服务器集合。 弱网服务器群组是一…...
如何提高独立服务器的安全性?
独立服务器相对于其它服务器来说,整体的硬件设备都是独立的同时还有着强大的服务器性能,其中CPU设备能够决定着服务器的运算能力,所以独立服务器的安全性受到企业格外的重视,严重的话会给企业造成巨大的资金损失。 那么࿰…...
ubuntu 搭建FTP服务,接收部标机历史音视频上报服务器
1.安装vsftpd 1.1.安装命令 sudo apt update sudo apt install vsftpd 1.2.备份原始配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.bak 1.3.配置 vsftpd 编辑配置文件 /etc/vsftpd.conf: sudo vim /etc/vsftpd.conf 将以下参数修改为对应值ÿ…...
在离线 OpenEuler-22.03 服务器上升级 OpenSSH 的完整指南
当然可以!以下是一篇结构清晰、语言通俗易懂的技术博客草稿,供你参考和使用: 在离线 OpenEuler-22.03 服务器上升级 OpenSSH 的完整指南 背景介绍 最近在对一台内网的 OpenEuler-22.03 服务器进行安全扫描时,发现其 SSH 版本存在…...
用java实现内网通讯,可多开客户端链接同一个服务器
创建一个客户端:package Socket;import java.io.IOException; import java.io.OutputStream; import java.net.Socket; import java.nio.charset.StandardCharsets; import java.util.Scanner;/* 聊天案例客户端 */ public class Client {private Socket socket;/**…...
蓝耘服务器部署ppocr-gpu项目
一、存在的问题。 conda install 总是访问失败。 二、云服务器选择 三、安装Anaconda3 进入云服务器后删除minconda文件夹 官网: https://repo.anaconda.com/archive/ 在里面找到自己系统的安装包,然后右击复制链接安装。 一定要选择Anaconda,因为…...
离线服务器算法部署环境配置
本文将详细记录我如何为一台全新的离线服务器配置必要的运行环境,包括基础编译工具、NVIDIA显卡驱动以及NVIDIA-Docker,以便顺利部署深度学习算法。 前提条件: 目标离线服务器已安装操作系统(本文以Ubuntu 18.04为例)…...
现代人工智能系统的实用设计模式
关键要点 AI设计模式是为现代AI驱动的软件中常见问题提供的可复用解决方案,帮助团队避免重复造轮子。我们将其分为五类:提示与上下文(Prompting & Context)、负责任的AI(Responsible AI)、用户体验&…...
数据集下载并保存本地进行加载
一、huggingface 1、下载数据集 #数据集下载 from datasets import load_datasetds load_dataset("FreedomIntelligence/medical-o1-reasoning-SFT", "zh",cache_dir ./dir)输出测试 2、保存数据集 #数据保存 ds.save_to_disk("./local_datase…...
物流项目第六期(短信微服务——对接阿里云第三方短信服务JAVA代码实现、策略模式 + 工厂模式的应用)
前五期: 物流项目第一期(登录业务)-CSDN博客 物流项目第二期(用户端登录与双token三验证)-CSDN博客 物流项目第三期(统一网关、工厂模式运用)-CSDN博客 物流项目第四期(运费模板列…...
嵌入式学习的第二十五天-系统编程-文件相关函数-标准I0+文件IO
一、文件的读和写 1.fwrite(读) size_t fread(void *ptr, size_t size, size_t nmemb, FILE *stream); 功能:从指定的stream流对象中获取nmemeb个大小为size字节的数据块到ptr所在的本地内存中。 参数:ptr 要存储数据的本地…...
MySQL 8.0 OCP 1Z0-908 171-180题
Q171.Examine this MySQL client command to connect to a remote database: mysql-h remote-example.org-u root–protocolTCP–ssl-mode Which two–ss1-mode values will ensure that an X.509-compliant certificate will be used to establish the SSL/TLS connection to …...
实现动态增QuartzJob,通过自定义注解调用相应方法
:::tip 动态增加Quartz定时任务,通过自定义注解来实现具体的定时任务方法调用。 ::: 相关依赖如下 <!-- 用来动态创建 Quartz 定时任务 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-start…...
Linux网络 网络基础一
1. 计算机网络背景 1.1 网络发展 独立模式:计算机之间相互独立。 网络互联:多台计算机连接在一起,完成数据共享。 局域网LAN:计算机数量更多了,通过交换机和路由器连接在一起。 广域网WAN:将远隔千里的…...
auto关键字解析
前言 在11标准之前,auto在c中是声明存储器类型的关键字。而在11标准中它的功能变为了类型推导。 对此, 在这里引入Cprimer中的原句: 编程时常常需要把表达式的值赋给变量,这就要求在声明变量的时候清楚的知道表达式的类型。然而…...
[实战]用户系统-1-基础功能完善
[实战]用户系统-1 目标响应格式化新建lib-interceptor增加res拦截器新建lib-filter完善异常处理日志处理新建lib-logger新增mongodb的model代码进度目标 我们的用户系统实战,将会实现以下功能,登录,注册,登出,修改用户信息,上传头像,响应的格式化,请求拦截,vip标识。…...
C#SQLServer数据库通用访问类
using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks; namespace thinger.cn.ADO.NETTeach { /// /// 数据库的通用类 /// public class SQLHelperBase…...
Linux中进程控制(上)
目录 进程创建 写时拷贝 fork常用场景 fork调用失败的原因 进程终止 进程退出场景 退出码 _exit函数 exit函数 进程等待 进程等待必要性 进程等待方法 wait方法 编辑 waitpid方法 获取⼦进程status 阻塞和非阻塞等待 进程创建 在linux中fork函数是⾮常重要的…...
为什么服务器突然变慢?从硬件到软件的排查方法
服务器突然变慢是许多系统管理员和网站运维人员经常遇到的问题。这种情况可能会影响网站性能、用户体验以及整个业务流程。了解服务器变慢的原因并采取相应的排查措施是至关重要的。本文将介绍服务器突然变慢的可能原因,从硬件到软件方面逐一排查,并提供…...
碳交易系统九大构成
碳交易系统九大构成 碳排放权交易系统的核心要素包括覆盖范围、配额总量、配额分配、排放监测、报送与核查,履约考核、抵消机制、交易机制、市场监管及配套的法律法规体系。 图源《中国碳排放权交易市场:从原理到实践》 1、覆盖范围 碳排放权交易体系…...
第9.2讲、Tiny Decoder(带 Mask)详解与实战
自己搭建一个 Tiny Decoder(带 Mask),参考 Transformer Encoder 的结构,并添加 Masked Multi-Head Self-Attention,它是 Decoder 的核心特征之一。 1. 背景与动机 Transformer 架构已成为自然语言处理(NLP…...
Java接口P99含义解析
假设你开了一家奶茶店(接口就是你的奶茶制作流水线),每天要处理100杯订单: 🚀 P99是什么? 平均响应时间:就像说"平均每杯奶茶2分钟做好",但可能有10杯让客人等10分钟P99…...
【Oracle 专栏】清理用户及表空间
Oracle相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 1.背景 今天需要清理一台服务器中之前的库,目前不再使用,以便释放空间。 如:清理 NH_MCRO_COLLECT 用户 2. 实验清理 2.1 查询:清…...
Qt功能区:Ribbon控件
控件 1. 按钮1.1 多选按钮1.2 2. 下拉列表框SARibbonComboBox2.1 简介2.2 代码实现 1. 按钮 1.1 多选按钮 软件功能:用于实现Category的名称居中。 SARibbonCheckBox继承于QCheckBox,使用方法完全相同。 SARibbonCheckBox* checkBox new SARibbonChe…...
eclipse 生成函数说明注释
在Eclipse中生成函数说明注释(JavaDoc风格)可以通过以下方法实现: 快捷键方式: 将光标放在函数上方输入/**后按回车键Eclipse会自动生成包含参数和返回值的注释模板 菜单方式: 选中函数点击菜单栏 Source > Gen…...
【Qt】QImage实战
QImage::Format_Mono, QImage::Format_RGB32, QImage::Format_ARGB32, QImage::Format_ARGB32_Premultiplied, 和 QImage::Format_RGB555 是 Qt 中不同的图像像素格式,它们在存储方式、颜色深度、是否支持透明通道以及适用场景上各有不同。下面是它们的详细对比&…...
tomcat知识点
1. JDK JDK是 Java 语言的软件开发工具包,JDK是整个java开发的核心,它包含JAVA工具还包括完整的 JRE(Java Runtime Environment)Java运行环境,包括了用于产品环境的各种库类,以及给开发人员使用的补充库。 JDK包含了一批用于Java开发的组件,其中包括: javac:编译器,将…...
Linux虚拟文件系统(2)
2.3 目录项-dentry 目录项,即 dentry,用来记录文件的名字、索引节点指针以及与其他目录项的关联关系。多个关联的目录项,就构成了文件系统的目录结构。和上一章中超级块和索引节点不同,目录项并不是实际存在于磁盘上的,…...