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

vue3 Props的使用

Props是什么?

官方地址:Props | Vue.js

在 Vue 中,props 是父组件向子组件传递数据的一种机制。

props 是子组件中定义的自定义属性,父组件通过这些属性向子组件传递数据。

它们是单向数据流的一部分,意味着数据只能从父组件流向子组件,而不能反过来。

定义props

在子组件中,可以通过 props 选项来定义接收的属性。props 可以是数组或对象形式。

子组件 child.vue

在使用 <script setup> 的单文件组件中,props 可以使用 defineProps() 宏来声明:

<script setup>
const props = defineProps(['foo'])
​
console.log(props.foo)
</script>

除了使用字符串数组来声明 props 外,还可以使用对象的形式:

<script setup>
const props = defineProps({title: String,likes: Number
})
​
console.log(props.foo)
</script>

对于以对象形式声明的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。比如,如果要求一个 prop 的值是 number 类型,则可使用 Number 构造函数作为其声明的值。

对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。

监听props 自定义属性

child.vue 子组件

<script setup>
import { ref } from 'vue'
import { watchEffect,watch } from 'vue'
​
//自定义属性
const props = defineProps(['name','age']);
​
​
//监听自定义属性
watch(() => props.name,(newVal,oldVal) => {console.log("----监听name---- newVal:" + newVal,"oldVal:" + oldVal);
})
watch(() => props.age,(newVal,oldVal) => {console.log("----监听age---- newVal:" + newVal,"oldVal:" + oldVal);
})
​
​
</script>

相关文章:

vue3 Props的使用

Props是什么&#xff1f; 官方地址&#xff1a;Props | Vue.js 在 Vue 中&#xff0c;props 是父组件向子组件传递数据的一种机制。 props 是子组件中定义的自定义属性&#xff0c;父组件通过这些属性向子组件传递数据。 它们是单向数据流的一部分&#xff0c;意味着数据只能…...

Ecode前后端传值

说明 在泛微 E9 系统开发过程中&#xff0c;使用 Ecode 调用后端接口并进行传值是极为常见且关键的操作。在上一篇文章中&#xff0c;我们探讨了 Ecode 调用后端代码的相关内容&#xff0c;本文将深入剖析在 Ecode 中如何向后端传值&#xff0c;以及后端又该如何处理接收这些值…...

【Linux】进程状态(二)

目录 前言&#xff1a; 一、进程状态&#xff1a; 1.运行状态(时间片) 2.阻塞状态 3.阻塞挂起状态 二、Linux进程状态&#xff1a; 1.运行状态(R)和阻塞状态(S) 2.深度睡眠状态(D) 3.停止状态(T) 3.1使进程在后台运行 4.追踪暂停状态(t) 5.死亡状态(X)和僵尸状态…...

domain 网络安全 网络安全域

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 文章目录 1、域的概述 1.1、工作组与域1.2、域的特点1.3、域的组成1.4、域的部署概述1.5、活动目录1.6、组策略GPO 2、域的部署实验 2.1、建立局域网&#xf…...

链表和STL —— list 【复习笔记】

1. 链表 1.1 链表的定义和类型 和顺序表一样&#xff0c;链表也是一种线性表&#xff0c;线性表存储结构为链式存储就是链表 链式存储不仅要保存数据元素&#xff0c;还要保存数据元素间的关系&#xff0c;这两个部分信息形成了结点。结点有两个域&#xff1a;数据域&#x…...

Java Map实现类面试题

Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么&#xff1f; HashMap基于哈希表实现&#xff0c;使用数组链表红黑树&#xff08;Java 8&#xff09;的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…...

技术架构和工程架构区别

技术架构 技术架构‌是对某一技术问题解决方案的结构化描述&#xff0c;包括组件结构及其交互关系。它涵盖部署方案、存储方案、缓存方案、日志方案等多个方面&#xff0c;旨在通过组织人员和技术&#xff0c;以最低的成本满足需求和应对变化&#xff0c;保障软件的稳定高效运…...

简单介绍JVM

1.什么是JVM&#xff1f; JVM就是Java虚拟机【Java Virtual Machine】&#xff0c;简称JVM。主要部分包括类加载子系统&#xff0c;运行时数据区&#xff0c;执行引擎&#xff0c;本地方法库等&#xff0c;接下来我们一一介绍 2.类加载子系统 JVM中运行的就是我们日常写的JA…...

纷析云:赋能企业财务数字化转型的开源解决方案

在企业数字化转型的浪潮中&#xff0c;财务管理的高效与安全成为关键。纷析云凭借其开源、安全、灵活的财务软件解决方案&#xff0c;为企业提供了一条理想的转型路径。 一、开源的力量&#xff1a;自主、安全、高效 纷析云的核心优势在于其100%开源的财务软件源码。这意味着…...

DeepSeek开源周第二弹:DeepEP如何用RDMA+FP8让MoE模型飞起来?

一、引言&#xff1a;MoE模型的通信瓶颈与DeepEP的诞生 在混合专家&#xff08;MoE&#xff09;模型训练中&#xff0c;专家间的全对全&#xff08;All-to-All&#xff09;通信成为性能瓶颈。传统方案在跨节点传输时带宽利用率不足50%&#xff0c;延迟高达300μs以上。DeepSee…...

NLP学习记录十:多头注意力

一、单头注意力 单头注意力的大致流程如下&#xff1a; ① 查询编码向量、键编码向量和值编码向量分别经过自己的全连接层&#xff08;Wq、Wk、Wv&#xff09;后得到查询Q、键K和值V&#xff1b; ② 查询Q和键K经过注意力评分函数&#xff08;如&#xff1a;缩放点积运算&am…...

【MySql】EXPLAIN执行计划全解析:15个字段深度解读与调优指南

文章目录 一、执行计划核心字段总览二、关键字段深度拆解1. type&#xff08;访问类型&#xff09;——查询性能的晴雨表典型场景分析&#xff1a; 2. key_len&#xff08;索引使用长度&#xff09;——索引利用率的检测仪计算示例&#xff1a; 3. Extra&#xff08;附加信息&a…...

论文笔记(七十二)Reward Centering(五)

Reward Centering&#xff08;五&#xff09; 文章概括摘要附录B 理论细节C 实验细节D 相关方法的联系 文章概括 引用&#xff1a; article{naik2024reward,title{Reward Centering},author{Naik, Abhishek and Wan, Yi and Tomar, Manan and Sutton, Richard S},journal{arX…...

Linux内核自定义协议族开发指南:理解net_device_ops、proto_ops与net_proto_family

在Linux内核中开发自定义协议族需要深入理解网络协议栈的分层模型。net_device_ops、proto_ops和net_proto_family是三个关键结构体,分别作用于不同的层次。本文将详细解析它们的作用、交互关系及实现方法,并提供一个完整的开发框架。 一、核心结构体的作用与层级关系 struct…...

SOME/IP-SD -- 协议英文原文讲解6

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 5.1.3.1 E…...

【数据处理】COCO 数据集掩码 Run-Length Encoding (RLE) 编码转二进制掩码

输入&#xff1a;结果.json 输出&#xff1a;mask.jpg json内容示例如下&#xff1a; {"labels":[ # class_id 1,2,3,...],"scores":[ # 置信度0.2,0.7,0.3,...],"bboxes":[[1244.0,161.0,1335.0,178.0],[1243.0,161.0,1336.0,178.0],[1242.0,1…...

Java中的缓存技术:Guava Cache vs Caffeine vs Redis

在Java中&#xff0c;缓存技术是提升应用性能的重要手段。常见的缓存技术包括Guava Cache、Caffeine和Redis。它们各有优缺点&#xff0c;适用于不同的场景。以下是对它们的详细对比&#xff1a; 1. Guava Cache 类型: 本地缓存 特点: 基于内存的缓存&#xff0c;适用于单机应…...

Day8 蓝桥杯acw讲解

首先先给大家看一道这个题&#xff0c; 我真的是太喜欢y总了&#xff0c;如果大家也是最近在准备蓝桥杯或者计算机相关的比赛&#xff0c;但是得加一个前提就是必须最好基础真的很好&#xff0c;要不然其实买了课&#xff0c;也没啥太大的用处&#xff0c;其实就可以以我本人举…...

《Operating System Concepts》阅读笔记:p147-p158

《Operating System Concepts》学习第 15 天&#xff0c;p147-p158 总结&#xff0c;总计 12 页。 一、技术总结 1.socket (1)定义 A socket is defined as an endpoint for communication(socket 是用于通信的端点&#xff0c;或者说socket 是通信端点的抽象表示。). A s…...

JSON Schema 入门指南:如何定义和验证 JSON 数据结构

文章目录 一、引言二、什么是 JSON Schema&#xff1f;三、JSON Schema 的基本结构3.1 基本关键字3.2 对象属性3.3 数组元素3.4 字符串约束3.5 数值约束 四、示例&#xff1a;定义一个简单的 JSON Schema五、使用 JSON Schema 进行验证六、实战效果6.1 如何使用 七、总结 一、引…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...