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是什么? 官方地址:Props | Vue.js 在 Vue 中,props 是父组件向子组件传递数据的一种机制。 props 是子组件中定义的自定义属性,父组件通过这些属性向子组件传递数据。 它们是单向数据流的一部分,意味着数据只能…...
Ecode前后端传值
说明 在泛微 E9 系统开发过程中,使用 Ecode 调用后端接口并进行传值是极为常见且关键的操作。在上一篇文章中,我们探讨了 Ecode 调用后端代码的相关内容,本文将深入剖析在 Ecode 中如何向后端传值,以及后端又该如何处理接收这些值…...
【Linux】进程状态(二)
目录 前言: 一、进程状态: 1.运行状态(时间片) 2.阻塞状态 3.阻塞挂起状态 二、Linux进程状态: 1.运行状态(R)和阻塞状态(S) 2.深度睡眠状态(D) 3.停止状态(T) 3.1使进程在后台运行 4.追踪暂停状态(t) 5.死亡状态(X)和僵尸状态…...
domain 网络安全 网络安全域
🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 文章目录 1、域的概述 1.1、工作组与域1.2、域的特点1.3、域的组成1.4、域的部署概述1.5、活动目录1.6、组策略GPO 2、域的部署实验 2.1、建立局域网…...
链表和STL —— list 【复习笔记】
1. 链表 1.1 链表的定义和类型 和顺序表一样,链表也是一种线性表,线性表存储结构为链式存储就是链表 链式存储不仅要保存数据元素,还要保存数据元素间的关系,这两个部分信息形成了结点。结点有两个域:数据域&#x…...
Java Map实现类面试题
Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么? HashMap基于哈希表实现,使用数组链表红黑树(Java 8)的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…...
技术架构和工程架构区别
技术架构 技术架构是对某一技术问题解决方案的结构化描述,包括组件结构及其交互关系。它涵盖部署方案、存储方案、缓存方案、日志方案等多个方面,旨在通过组织人员和技术,以最低的成本满足需求和应对变化,保障软件的稳定高效运…...
简单介绍JVM
1.什么是JVM? JVM就是Java虚拟机【Java Virtual Machine】,简称JVM。主要部分包括类加载子系统,运行时数据区,执行引擎,本地方法库等,接下来我们一一介绍 2.类加载子系统 JVM中运行的就是我们日常写的JA…...
纷析云:赋能企业财务数字化转型的开源解决方案
在企业数字化转型的浪潮中,财务管理的高效与安全成为关键。纷析云凭借其开源、安全、灵活的财务软件解决方案,为企业提供了一条理想的转型路径。 一、开源的力量:自主、安全、高效 纷析云的核心优势在于其100%开源的财务软件源码。这意味着…...
DeepSeek开源周第二弹:DeepEP如何用RDMA+FP8让MoE模型飞起来?
一、引言:MoE模型的通信瓶颈与DeepEP的诞生 在混合专家(MoE)模型训练中,专家间的全对全(All-to-All)通信成为性能瓶颈。传统方案在跨节点传输时带宽利用率不足50%,延迟高达300μs以上。DeepSee…...
NLP学习记录十:多头注意力
一、单头注意力 单头注意力的大致流程如下: ① 查询编码向量、键编码向量和值编码向量分别经过自己的全连接层(Wq、Wk、Wv)后得到查询Q、键K和值V; ② 查询Q和键K经过注意力评分函数(如:缩放点积运算&am…...
【MySql】EXPLAIN执行计划全解析:15个字段深度解读与调优指南
文章目录 一、执行计划核心字段总览二、关键字段深度拆解1. type(访问类型)——查询性能的晴雨表典型场景分析: 2. key_len(索引使用长度)——索引利用率的检测仪计算示例: 3. Extra(附加信息&a…...
论文笔记(七十二)Reward Centering(五)
Reward Centering(五) 文章概括摘要附录B 理论细节C 实验细节D 相关方法的联系 文章概括 引用: 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协议越来越多的用于汽车电子行业中,关于协议详细完全的中文资料却没有,所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块: 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 5.1.3.1 E…...
【数据处理】COCO 数据集掩码 Run-Length Encoding (RLE) 编码转二进制掩码
输入:结果.json 输出:mask.jpg json内容示例如下: {"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中,缓存技术是提升应用性能的重要手段。常见的缓存技术包括Guava Cache、Caffeine和Redis。它们各有优缺点,适用于不同的场景。以下是对它们的详细对比: 1. Guava Cache 类型: 本地缓存 特点: 基于内存的缓存,适用于单机应…...
Day8 蓝桥杯acw讲解
首先先给大家看一道这个题, 我真的是太喜欢y总了,如果大家也是最近在准备蓝桥杯或者计算机相关的比赛,但是得加一个前提就是必须最好基础真的很好,要不然其实买了课,也没啥太大的用处,其实就可以以我本人举…...
《Operating System Concepts》阅读笔记:p147-p158
《Operating System Concepts》学习第 15 天,p147-p158 总结,总计 12 页。 一、技术总结 1.socket (1)定义 A socket is defined as an endpoint for communication(socket 是用于通信的端点,或者说socket 是通信端点的抽象表示。). A s…...
JSON Schema 入门指南:如何定义和验证 JSON 数据结构
文章目录 一、引言二、什么是 JSON Schema?三、JSON Schema 的基本结构3.1 基本关键字3.2 对象属性3.3 数组元素3.4 字符串约束3.5 数值约束 四、示例:定义一个简单的 JSON Schema五、使用 JSON Schema 进行验证六、实战效果6.1 如何使用 七、总结 一、引…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...
