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

组件通信-v-model

  1. 概述:实现 父↔子 之间相互通信。

  2. 前序知识 —— v-model的本质

<!-- 使用v-model指令 -->
<input type="text" v-model="userName"><!-- v-model的本质是下面这行代码 -->
<input type="text" :value="userName" @input="userName =(<HTMLInputElement>$event.target).value"
>

     3.(父组件)组件标签上的v-model的本质::moldeValueupdate:modelValue事件。

<script setup lang="ts">
import { ref } from 'vue'
import AtInput from './AtInput.vue'
const username = ref('zhangsan')
</script><template><div class="father"><h1>父组件</h1><!-- 第一种写法 --><AtInput v-model="username" /><!-- 第二种写法 --><!-- <AtInput :modelValue="username" @update:modelValue="username = $event" /> --></div></template>

(子组件) AtInput组件中:

<script setup lang="ts">
// 接收props
defineProps(['modelValue'])// 声明事件
const emit= defineEmits(['update:modelValue'])
</script><template><div class="input"><input type="text" :value="modelValue"@input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"></div></template>

4.也可以更换value,例如改成ming

<!-- 也可以更换value,例如改成abc-->
<AtInputv-model:ming="userName"/><!-- 上面代码的本质如下 -->
<AtInput:ming="userName" @update:ming="userName = $event"/>

AtInput组件中

<template><input type="text" :value="ming" @input="emit('update:abc',$event.target.value)">
</template><script setup lang="ts" name="AtInput">// 接收propsdefineProps(['ming'])// 声明事件const emit = defineEmits(['update:ming'])
</script>

5.如果value可以更换,那么就可以在组件标签上多次使用v-model

<AtInput v-model:ming="userName" v-model:mima="password"/>

相关文章:

组件通信-v-model

概述&#xff1a;实现 父↔子 之间相互通信。 前序知识 —— v-model的本质 <!-- 使用v-model指令 --> <input type"text" v-model"userName"><!-- v-model的本质是下面这行代码 --> <input type"text" :value"use…...

使用PyMongo连接MongoDB的基本操作

MongoDB是由C语言编写的非关系型数据库&#xff0c;是一个基于分布式文件存储的开源数据库系统&#xff0c;其内容存储形式类似JSON对象&#xff0c;它的字段值可以包含其他文档、数组及文档数组。在这一节中&#xff0c;我们就来回顾Python 3下MongoDB的存储操作。 常用命令:…...

010302-oss_反向代理_负载均衡-web扩展2-基础入门-网络安全

文章目录 1 OSS1.1 什么是 OSS 存储&#xff1f;1.2 OSS 核心功能1.3 OSS 的优势1.4 典型使用场景1.5 如何接入 OSS&#xff1f;1.6 注意事项1.7 cloudreve实战演示1.7.1 配置cloudreve连接阿里云oss1.7.2 常见错误1.7.3 安全测试影响 2 反向代理2.1 正向代理和反向代理2.2 演示…...

PyQt 或 PySide6 进行 GUI 开发文档与教程

一、官网文档 Qt 官方文档&#xff1a;Porting to Qt 6 | Qt 6.9Qt 维基&#xff1a;​​​​​​​Qt WikiQt for Python (PySide6) &#xff1a;​​​​​​​Qt for Python - Qt WikiPySide6 快速上手指南&#xff1a;​​​​​​​Getting Started - Qt for Python PyS…...

【东枫科技】AMD / Xilinx Alveo™ V80计算加速器卡

AMD / Xilinx Alveo™ V80计算加速器卡 AMD/Xilinx Alveo ™ V80计算加速器卡是一款功能强大的计算加速器&#xff0c;基于7nm Versal™ 自适应SoC架构而打造。 AMD/Xilinx Alveo V80卡设计用于内存密集型任务。 这些任务包括HPC、数据分析、网络安全、传感器处理、计算存储和…...

C++ 动态内存管理

operator new和operator delete函数是两个全局函数&#xff0c;编译器在编译new和delete时会调用这两个函数&#xff0c;其底层分别是封装malloc和free 1.new new 内置类型 内置类型没有构造函数&#xff0c;所以使用new就是调operator new函数开空间&#xff0c;如果要初始化…...

(11)Vue-Router路由的详细使用

本系列教程目录&#xff1a;Vue3Element Plus全套学习笔记-目录大纲 文章目录 第2章 路由 Vue-Router2.1 Vue路由快速入门2.1.1 创建项目2.1.2 路由运行流程 2.2 传递参数-useRoute2.2.1 路径参数-params1&#xff09;普通传参2&#xff09;传递多个参数3&#xff09;对象方式传…...

RISCV的smstateen-ssstateen扩展

RISC-V 的 Smstateen / Ssstateen 扩展是为了解决安全性和资源隔离性问题而设计的&#xff0c;尤其是针对在多个上下文&#xff08;如用户线程、多个虚拟机&#xff09;之间 潜在的隐蔽信道(covert channel) 风险。 &#x1f310; 背景&#xff1a;隐蔽信道与上下文切换问题 当…...

C++ 与 Lua 联合编程

在软件开发的广阔天地里&#xff0c;不同编程语言各有所长。C 以其卓越的性能、强大的功能和对硬件的直接操控能力&#xff0c;在系统开发、游戏引擎、服务器等底层领域占据重要地位&#xff0c;但c编写的程序需要编译&#xff0c;这往往是一个耗时操作&#xff0c;特别对于大型…...

瑞萨 EZ-CUBE2 调试器

瑞萨 EZ-CUBE2 调试器 本文介绍了瑞萨 EZ-CUBE2 调试器的基本信息、调试方式、环境搭建、硬件连接、软件测试等。 包装展示 调试器展示 开关选项 详见&#xff1a;EZ-CUBE2 | Renesas 瑞萨电子 . 环境搭建 使用 Renesas 公司的 e2 studio 开发工具&#xff0c;下载 并安装该…...

MATLAB滤波工具箱演示——自定义维度、滤波方法的例程演示与绘图、数据输出

使用 M A T L A B MATLAB MATLAB的界面做了一个 M A T L A B MATLAB MATLAB滤波工具箱 d e m o demo demo&#xff0c;本文章给出演示&#xff1a;自定义维度、滤波方法的例程演示与绘图、数据输出 文章目录 编辑界面使用方法优势待改进点部分代码 编辑界面 使用 M A T L A B …...

数据库索引优化实战: 如何设计高效的数据库索引

数据库索引优化实战: 如何设计高效的数据库索引 一、理解数据库索引的核心原理 1.1 B树索引的结构特性 数据库索引&#xff08;Database Index&#xff09;的本质是通过特定数据结构加速数据检索。现代关系型数据库普遍采用B树&#xff08;B Tree&#xff09;作为默认索引结构&…...

TS 安装

TS较JS优势 1 TS静态类型编程语言。编译时发现错误 2 类型系统 强化变量类型概念 3 支持新语法 4 类型推断机制 可以和React框架中的各种hook配合 5 任何地方都有代码提示 tsc 命令 将TS转为JS 1 tsc 文件.ts 生成 js文件 2 执行JS代码...

CMake separate_arguments用法详解

separate_arguments 是 CMake 中用于将字符串分割成参数列表的命令&#xff0c;适用于处理包含空格的参数或复杂命令行参数。以下是其用法详解&#xff1a; 基本语法 separate_arguments(<variable> [UNIX|WINDOWS_COMMAND] [PROGRAM <program>] [ARGS <args&…...

【AI科技】AMD ROCm 6.4 新功能:突破性推理、即插即用容器和模块化部署,可在 AMD Instinct GPU 上实现可扩展 AI

AMD ROCm 6.4 新功能&#xff1a;突破性推理、即插即用容器和模块化部署&#xff0c;可在 AMD Instinct GPU 上实现可扩展 AI 现代 AI 工作负载的规模和复杂性不断增长&#xff0c;而人们对性能和部署便捷性的期望也日益提升。对于在 AMD Instinct™ GPU 上构建 AI 和 HPC 未来…...

2025年- H20-Lc128-240. 搜索二维矩阵 II(矩阵)---java版

1.题目描述 2.思路 遍历矩阵&#xff0c;然后如果遇到矩阵中的值正好等于target&#xff0c;输出true。否则&#xff0c;输出false。 3.代码 public class H240 {public boolean searchMatrix(int[][] matrix, int target) {//1.计算出总的行值&#xff0c;总的列值。int mm…...

LearningFlow:大语言模型城市驾驶的自动化策略学习工作流程

《LearningFlow: Automated Policy Learning Workflow for Urban Driving with Large Language Models》2025年1月发表&#xff0c;来自香港科技大学广州分校的论文。 强化学习&#xff08;RL&#xff09;的最新进展表明了自动驾驶的巨大潜力。尽管有这一前景&#xff0c;但奖励…...

C语言数据类型与内存布局

C语言数据类型内存占用 类型32位系统64位系统格式说明符char1字节1字节%cint4字节4字节%dfloat4字节4字节%fdouble8字节8字节%lflong long8字节8字节%lld...

从原理到实战讲解回归算法!!!

哈喽&#xff0c;大家好&#xff0c;我是我不是小upper, 今天系统梳理了线性回归的核心知识&#xff0c;从模型的基本原理、参数估计方法&#xff0c;到模型评估指标与实际应用场景&#xff0c;帮助大家深入理解这一经典的机器学习算法&#xff0c;助力数据分析与预测工作。 …...

linux指令中的竖线(“|”)是干啥的?【含实例展示】

文章目录 一、管道符的基本概念二、管道符的核心作用三、常用实例展示四、进阶技巧五、注意事项总结 实操展示**案例1&#xff1a;统计日志中特定错误的数量****案例2&#xff1a;查找当前运行的进程****案例3&#xff1a;合并排序并去重****案例4&#xff1a;实时监控CPU占用前…...

[HOT 100] 0124. 二叉树中的最大路径和

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 124. 二叉树中的最大路径和 - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一…...

[SoC]AXI总线Performance验证方案

AXI总线Performance验证方案 测试 AXI (Advanced eXtensible Interface) 的性能是 SoC 验证中的重要任务,旨在评估其在不同负载和配置下的表现是否满足设计要求。以下详细说明如何测试 AXI 的性能、需要统计的变量、计算方法、在验证环境中动态计算性能的方法,以及如何…...

EMC PowerStore存储学习之一NVMe磁盘的命名规则

PowerStore的日志中经常会看到类似于/dev/nvme1n1的磁盘&#xff0c;在svc_diag list --show_drives中也可以看到类似这样的输出&#xff0c;如下图&#xff1a; 这里的Drives的显示都是 /dev/nvmeXnY的形式&#xff0c;那么这个磁盘命名规则怎么解读呢&#xff1f; 在Linux系…...

apt-mirror搭建ubuntu本地离线源

参考资料 4 Steps to Setup Local Repository in Ubuntu using APT-mirror 使用 APT-mirror 四步配置 Ubuntu 本地软件仓库 ubuntu下的apt-get内网本地源的搭建...

【记录】新Ubuntu20配置voxelmap的环境安装

因为系统总出问题&#xff0c;仅用于个人纪录。 1. 升级CMake到3.28及以上版本&#xff08;Sophus依赖&#xff09; wget https://github.com/Kitware/CMake/releases/download/v3.28.3/cmake-3.28.3-linux-x86_64.sh chmod x cmake-3.28.3-linux-x86_64.sh sudo ./cmake-3.2…...

Python全流程开发实战:基于IMAP协议安全下载个人Gmail邮箱内所有PDF附件

在日常办公场景中&#xff0c;面对成百上千封携带PDF附件的邮件&#xff0c;手动逐一下载往往耗时耗力&#xff0c;成为效率瓶颈。如何通过代码实现“一键批量下载”&#xff1f;本文将以**“Gmail全量PDF附件下载工具”**开发为例&#xff0c;完整拆解从需求分析到落地交付的P…...

CPU:AMD的线程撕裂者(Threadripper)和霄龙(EPYC)的区别

AMD的**线程撕裂者&#xff08;Threadripper&#xff09;和霄龙&#xff08;EPYC&#xff09;**虽然都是面向高性能市场的处理器&#xff0c;但它们在定位、功能和技术规格上有显著区别。以下是两者的主要差异&#xff1a; 1. 目标市场 线程撕裂者&#xff08;Threadripper&…...

【五一培训】Day 2

注&#xff1a; 1. 本次培训内容的记录将以“Topic”的方式来呈现&#xff0c;用于记录个人对知识点的理解。 2. 由于培训期间&#xff0c;作者受限于一些现实条件&#xff0c;本文的排版及图片等相关优化&#xff0c;需要过一段时间才能完成。 3. 关于老板点评的一些思考 你…...

shell_plus

python manage.py shell_plus 是由 django-extensions 提供的一个增强版的 Django shell&#xff0c;它自动导入你的所有模型和其他一些便捷功能&#xff0c;使得交互式开发更加方便。 如果你遇到配置或运行问题&#xff0c;特别是与 RQ_SHOW_ADMIN_LINK 相关的 ImproperlyCon…...

基于C++、JsonCpp、Muduo库实现的分布式RPC通信框架

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;RPC框架 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 项目介绍JsonCpp库简单介绍Muduo库简单介绍C11异步操作——std::future1. 使用 std::async 关联异步任务2. std::packaged_task…...

Redis TLS 加密对性能的影响分析

Redis TLS 加密对性能的影响分析 是的&#xff0c;Redis 启用 TLS 加密确实会对性能产生一定影响&#xff0c;但影响程度取决于多种因素。以下是详细分析&#xff1a; 一、性能影响的主要来源 加密/解密开销‌&#xff1a; TLS 握手过程中的非对称加密&#xff08;如 RSA、…...

树与二叉树完全解析:从基础到应用

目录 一、树形结构的基础认知 1.1 树的定义与特点 1.2 核心术语解析 二、二叉树的深度解析 2.1 二叉树定义 2.2 特殊二叉树类型 2.3 重要性质总结 三、二叉树的存储与遍历 3.1 存储方式对比 3.2 遍历算法精讲 四、经典题型训练 4.1 相同树判断&#xff08;LeetCode…...

PostgreSQL:pgJDBC 下载和安装

PostgreSQL 的 pgJDBC 是用于 Java 程序连接和操作 PostgreSQL 数据库的 JDBC 驱动程序。 PostgreSQL&#xff1a;pgJDBC v42.7 下载和安装 点击【Application Stack Builder】 安装目录&#xff1a; 运行 cmd cd D:\PostgreSQL\pgJDBC copy postgresql-42.7.2.jar D:\groovy-…...

正则表达式与文本三剑客grep、sed、awk

目录 一、正则表达式 1.1、字符匹配 1.2、次数匹配 1.3、位置锚定 1.4、分组或其他 二、扩展正则表达式 三、grep 四、awk 4.1、常用命令选项 4.2、工作原理 4.3、基础用法 4.4、内置变量 4.5、模式 4.6、条件判断 4.7、awk中的循环语句 4.8、数组 4.9、脚本 …...

(35)VTK C++开发示例 ---将图片映射到平面2

文章目录 1. 概述2. CMake链接VTK3. main.cpp文件4. 演示效果 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;VTK开发 &#x1f448; 1. 概述 与上一个示例不同的是&#xff0c;使用vtkImageReader2Factory根据文件扩展名或内容自动创建对应的图像文件读取器&a…...

每日一题洛谷P8635 [蓝桥杯 2016 省 AB] 四平方和c++

P8635 [蓝桥杯 2016 省 AB] 四平方和 - 洛谷 (luogu.com.cn) 直接暴力枚举&#xff0c;不做任何优化的话最后会TLE一个&#xff0c;稍微优化一下就过了&#xff08;数据给的还是太良心了&#xff09; 优化&#xff1a;每层循环用if判断一下&#xff0c;如果大于n就直接跳 当然…...

【python】【UV】一篇文章学完新一代 Python 环境与包管理器使用指南

&#x1f40d; UV&#xff1a;新一代 Python 环境与包管理器使用指南 一、UV 是什么&#xff1f; UV 是由 Astral 团队开发的高性能 Python 环境管理器&#xff0c;旨在统一替代 pyenv、pip、venv、pip-tools、pipenv 等工具。 1.1 UV 的主要功能 &#x1f680; 极速包安装&…...

6.10.单源最短路径问题-Dijkstra算法

一.BFS算法的局限性&#xff1a; 如上图&#xff0c;BFS算法可以解决无权图的单源最短路径问题&#xff0c; 如果是解决带权图的单源最短路径问题&#xff0c;BFS算法就不适用了&#xff0c;如下图&#xff1a; 如上图&#xff0c;比如求G港到其他顶点的最短路径&#xff0c; …...

Python基于深度学习的网络舆情分析系统(附源码,部署)

大家好&#xff0c;我是Python徐师兄&#xff0c;一个有着7年大厂经验的程序员&#xff0c;也是一名热衷于分享干货的技术爱好者。平时我在 CSDN、掘金、华为云、阿里云和 InfoQ 等平台分享我的心得体会。 &#x1f345;文末获取源码联系&#x1f345; 2025年最全的计算机软件毕…...

mysql--索引

索引作为一种数据结构&#xff0c;其用途是用于提升检索数据的效率。 分类 普通索引&#xff08;INDEX&#xff09;&#xff1a;索引列值可重复 唯一索引&#xff08;UNIQUE&#xff09;&#xff1a;索引列值必须唯一&#xff0c;可以为NULL 主键索引&#xff08;PRIMARY KEY&a…...

【算法题】荷兰国旗问题[力扣75题颜色分类] - JAVA

一、题目 二、文字解释 1.1 前言 本题是经典的「荷兰国旗问题」&#xff0c;由计算机科学家 Edsger W. Dijkstra 首先提出。如同图中所示的荷兰国旗&#xff0c;其由红、白、蓝三色水平排列组成。在算法领域&#xff0c;该问题可类比为将一个由特定的三种元素&#xff08;可…...

【数据结构】堆的完整实现

堆的完整实现 堆的完整实现GitHub地址前言堆的核心功能实现重温堆的定义堆结构定义1. 堆初始化与销毁2. 元素交换函数3. 堆化操作向上调整&#xff08;子→父&#xff09;向下调整&#xff08;父→子&#xff09; 4. 堆元素插入5. 堆元素删除6. 辅助功能函数堆的判空获取堆顶元…...

软考 系统架构设计师系列知识点之杂项集萃(51)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;50&#xff09; 第80题 设三个煤场A1、A2、A3分别能供应煤7、12、11万吨&#xff0c;三个工厂B1、B2、B3分别需要10、10、10万吨&#xff0c;从各煤场到各工厂运煤的单价&#xff08;百元/吨&…...

patch命令在代码管理中的应用

patch 是一个用于将差异文件&#xff08;补丁&#xff09;应用到源代码的工具&#xff0c;常用于修复 bug、添加功能或调整代码结构。在您提供的代码中&#xff0c;patch 命令通过一系列补丁文件&#xff08;.patch&#xff09;修改了 open-amp 库的源代码。 patch 命令的核心作…...

Qt结构体运算符重载指南

在 Qt 中&#xff0c;结构体&#xff08;struct&#xff09;或类&#xff08;class&#xff09;中重载运算符是一种常见的做法&#xff0c;用于实现自定义类型的逻辑操作&#xff08;如比较、算术运算等&#xff09;。以下是一些常见的运算符重载示例和注意事项&#xff1a; 1.…...

基于bert预训练模型的垃圾短信分类系统

文章目录 任务介绍数据说明注意事项数据处理数据准备数据集划分数据集类构建模型构建与训练模型构建模型训练模型推理附录任务介绍 随着移动通信技术的飞速发展,短信(Short Message Service, SMS)已成为人们日常生活中不可或缺的沟通方式之一。然而,垃圾短信(Spam SMS)的…...

[Android] 网易爆米花TV 2.0.0.0429(原网易Filmly,支持多网盘的TV版、电脑版带海报墙播放器)

[Android] 网易爆米花 链接&#xff1a;https://pan.xunlei.com/s/VOPDuQS9D7qixvAnoy7-he2PA1?pwdhzvh# [Android] 网易爆米花TV 2.0.0.0429&#xff08;原网易Filmly&#xff0c;支持多网盘的TV版、电脑版带海报墙播放器&#xff09; 详细介绍直接上主页截图&#xff0c;…...

# 前后端分离象棋对战项目开发记录

1. **结构清晰**&#xff1a;使用更直观的标题、分段和列表&#xff0c;增强可读性。 2. **视觉美观**&#xff1a;添加Markdown格式化&#xff08;如代码块、加粗、斜体&#xff09;&#xff0c;并建议配色和排版风格。 3. **内容精炼**&#xff1a;精简冗余表述&#xff0c;突…...

Android Framework学习二:Activity创建及View绘制流程

文章目录 Window绘制流程Window Manager Service&#xff08;WMS&#xff09;SurfaceSurfaceFlinger 安卓View层次结构ActivityPhoneWindowActivity与PhoneWindow两者之间的关系ViewRootImplDecorViewDecorView 的作用DecorView 的结构总结 Activity创建流程View invalidate调用…...

文章五《卷积神经网络(CNN)与图像处理》

文章5&#xff1a;卷积神经网络&#xff08;CNN&#xff09;与图像处理——让AI学会"看图说话" 引言&#xff1a;你的AI宠物如何认出猫狗&#xff1f; 想象你的手机突然有了"眼睛"&#xff0c;不仅能识别照片里的猫狗&#xff0c;还能告诉你它们的品种&am…...