当前位置: 首页 > 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 如何使用 七、总结 一、引…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...