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

《Vue3学习手记6》

news 来源：原创 2025/6/8 19:56:05

组件通信

props

props 可以父传子，也可以子传父

1.父传子
子组件：

<template><div class="child"><h2>子组件</h2><h3>礼物：{{ gift }}</h3><h3 v-show="zichan">父亲给我的:{{zichan}}</h3><button @click="getRich">点我接收父亲的资产</button></div>
</template><script setup lang="ts" name="Child">
import {ref} from "vue"
const gift=ref("鲜花")
const zichan=ref("")// 1.2子组件接收参数
const props=defineProps(["rich"])function getRich(){zichan.value=props.rich.car
}
</script>

父组件：

<template><div class="father"><h2>父组件</h2><h3>资产：{{rich.car}}--{{ rich.money }}--{{ rich.house }}</h3><hr><Child :rich="rich"/>    <!-- 1.1父组件给子组件传递 -->											</div>
</template><script setup lang="ts" name="Father">
import Child from "@/pages/01_props/Child.vue"
import { ref,reactive } from "vue";
const rich=reactive({car:"劳斯莱斯",money:"1000w",house:"3栋房子",
})	
</script>

2.子传父
子组件：

<template><div class="child"><h2>子组件</h2><h3>礼物：{{ gift }}</h3><button @click="send(gift)">点我将礼物传递给父亲</button></div>
</template><script setup lang="ts" name="Child">
import {ref} from "vue"
const gift=ref("鲜花")
// 2.3儿子接收函数
const props=defineProps(["sendGift"])// 2.4调用sendGift(),并将参数传递过去
function send(gift:string){props.sendGift(gift)
}
// 或者直接在模板中写：<button @click="sendGift(gift)">点我将礼物传递给父亲</button>
</script>

父组件：

<template><div class="father"><h2>父组件</h2><h3>资产：{{rich.car}}--{{ rich.money }}--{{ rich.house }}</h3><hr><!-- 2.5将儿子传递的参数呈现在页面上 --><h3 v-show="gift">儿子传递给我的礼物：{{gift}}</h3><Child:sendGift="getGift"/> <!-- 2.2将函数给儿子 --></div>
</template><script setup lang="ts" name="Father">
import Child from "@/pages/01_props/Child.vue"
import { ref,reactive } from "vue";
const rich=reactive({car:"劳斯莱斯",money:"1000w",house:"3栋房子",
})
// 2.6 参数呈现在页面上
const gift=ref("")
// 2.1子传父——父亲需要给孩子一个函数
function getGift(value:string){  //value是需要接受到的儿子给父亲的数据gift.value=value
}</script>

自定义事件

自定义事件子传父

父组件接收数据（绑定事件），子组件提供数据（触发事件）

子组件：

<template><div class="child"><h3>子组件</h3><h3>礼物：{{ gift }}</h3><button @click="send(gift)">点我将礼物送给父亲</button>	</div>
</template><script setup lang="ts" name="Child">import {ref} from "vue"const gift=ref("鲜花")// 3.接收自定义事件const emit=defineEmits(["get"])// 4.触发自定义事件function send(gift:string){emit("get",gift)}// 5.也可以写为：<button @click="emit("get",gift)">点我将礼物送给父亲</button>	
</script>

父组件：

<template><div class="father"><h3>父组件</h3><h2>儿子传递给我的礼物：{{present}}</h2><!--1.绑定自定义事件：--><Child @get="getGift"/></div>
</template><script setup lang="ts" name="Father">
import Child from "@/pages/02_custom-event/Child.vue"
import {ref} from "vue"
const present=ref("")
// 2.方法function getGift(value:string){present.value=value}
</script>

mitt

与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。
1.安装:npm i mitt
2.src下新建utils文件夹,utils下新建emitter.ts文件

下面案例是实现兄弟组件通信，哥哥给弟弟传递数据
解析：哥哥传递数据（触发事件），弟弟接收数据（绑定事件）
弟弟组件：

<template><div class="child2"><h3>子组件2</h3><h2 v-show="toy">哥哥传递给我的玩具:{{ toy }}</h2></div>
</template><script setup lang="ts" name="Child2">
import emitter from "@/utils/emitter"
import {ref} from "vue"// 1.绑定事件并且使其呈现在页面
const toy=ref("")
emitter.on("getToy",(value:string)=>{  //value是接收到的哥哥传过来的参数toy.value=value  //这行代码中的toy和哥哥传递的toy不一样
})
</script>

哥哥组件：

<template><div class="child1"><h3>子组件1</h3><h2>玩具:{{toy}}</h2><button @click="sendToy">点我将玩具给弟弟</button></div>
</template><script setup lang="ts" name="Child1">
import emitter from "@/utils/emitter"
import {ref} from "vue"
const toy=ref("乐高")// 2.触发事件
function sendToy(){emitter.emit("getToy",toy)  //toy是传递的参数
}
</script>

v-model

表单组件双向绑定底层原理
v-model既可以子传父(@update:modelValue=“userName=$event”),也可以父传子(:modelValue=“userName”)

父组件：

<template><div class="father"><h3>父组件</h3><!-- 知识点一： --><!-- v-model用在html标签上 --><!-- <input type="text" v-model="userName">可以实现双向绑定 --><!-- v-model的底层原理：动态value值配合input事件 --><!-- <input type="text" :value="userName" @input="userName = (<HTMLInputElement>$event.target).value"> --><!-- v-model用在组件标签上 --><!-- 自己封装一个好看的组件 --><MyInput v-model="userName"/> <!-- 这样写并不能实现双向绑定 --><!-- 底层原理： -->   <!-- 需要在MyInput里进行封装,才可以进行双向绑定 --><!-- <MyInput :modelValue="userName" @update:modelValue="userName=$event"/> -->  <!-- 名字上规定的 --><!-- 12行代码和15行任选一个写,两者一个是简洁写法,一个是底层原理 --></div>
</template><script setup lang="ts" name="Father">import { ref } from "vue";import MyInput from './MyInput.vue'const userName=ref("zhangsan")
</script>

MyInput组件：

<template><input type="text":value="modelValue"  @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)">
</template><script setup lang="ts" name="MyInput">
// 接收defineProps(["modelValue"])const emit=defineEmits(["update:modelValue"])
</script><style scoped>input {border: 2px solid black;background-image: linear-gradient(45deg,red,yellow,green);height: 30px;font-size: 20px;color: white;}
</style>

v-model修改名字

如果修改了，就可以在组件标签上多次使用v-model；例如下边的代码增加了一个密码表单

<!-- 知识点三：--><!-- 修改modelValue (如果修改了，就可以在组件标签上多次使用v-model)--><MyInput v-model:account="userName" v-model:psd="passWord"/> <!-- account代替了原来的modelValue -->

但是在MyInput组件中需要将modelValue替换为account和psd

《Vue3学习手记6》

组件通信 props props 可以父传子，也可以子传父 1.父传子子组件： <template><div class"child"><h2>子组件</h2><h3>礼物：{{ gift }}</h3><h3 v-show"zichan">父亲给我的…...

编程日记 2025/5/28 6:39:30

抗体品牌推荐

默克超级英雄抗体的披荆斩棘之路自保罗埃尔利希1891年10月提出“Antikrper”一词后，科研人逐渐意识到抗体（Antibody）可以应用于各种类型的研究中。从结构、功能、人体免疫应答……到基因治疗、药物研究，抗体的身影无处不在。值…...

编程日记 2025/5/29 23:56:44

生成式人工智能认证（GAI认证）有什么用？

在人工智能的浪潮中，我们正站在一个前所未有的十字路口。有人将生成式人工智能（Generative AI）视为技术迭代的工具，有人将其视为颠覆行业的“黑匣子”，而更少有人意识到：它正在重新定义人类与技术的共生关系。当AI不再局限于辅助人类，而是开始参与创作、决策甚至伦理判断…...

编程日记 2025/5/19 8:53:45

全新升级：BRAV-7601-T003高性能无风扇AI边缘计算系统，助力智能未来！

在数字化与智能化飞速发展的今天，AI边缘计算正成为各行各业的核心驱动力。BRAV-7601作为一款高性能无风扇AI边缘计算系统，凭借其强大的硬件配置与丰富的扩展能力，为车路协同、特种车辆车载、机器视觉、医疗影像等领域提供了卓越的解决方案。最…...

编程日记 2025/5/26 8:00:35

基于c++的LCA倍增法实现

原理就不写了，自己找b站视频学习 #include <iostream> #include <vector> #include <cmath> #include <algorithm> using namespace std; const int MAXN 100005; // 最大节点数 const int MAXLOG 20; // 最大对数深度 vector<…...

编程日记 2025/5/24 22:17:12

探索大语言模型（LLM）：语言模型从海量文本中无师自通

文章目录引言：当语言模型学会“自己教自己”一、自监督学习：从“无标签”中挖掘“有监督”信号二、语言模型的自监督训练范式：两大经典路径1. 掩码语言模型（Masked Language Modeling, MLM）——以BERT为例2. 自回归语…...

编程日记 2025/5/16 2:09:48

大语言模型 - 运行、微调的显存计算详解与优化全量微调、LoRA 优化策略

写在前面随着Transformer架构的大语言模型（LLM）不断发展，其参数规模也在迅速增加。无论是进行模型推理还是微调训练，GPU显存消耗都是开发和应用LLM时的重要考量。本文将详细探讨大模型运行（推理）与微调时…...

编程日记 2025/5/29 11:03:52

【音视频】视频解码实战

FFmpeg流程从本地读取YUV数据编码为h264格式的数据，然后再存⼊到本地，编码后的数据有带startcode与FFmpeg 示例⾳频编码的流程基本⼀致。函数说明 avcodec_find_encoder_by_name：根据指定的编码器名称查找注册的编码器。avcodec_alloc_co…...

编程日记 2025/5/23 1:59:59

计算机网络学习笔记 4-6章

第 4 章网络层【考纲内容】 （一）网络层的功能异构网络互连；路由与转发；SDN 基本概念；拥塞控制 （二）路由算法静态路由与动态路由；距离 - 向量路由算法&#xff1…...

编程日记 2025/5/27 8:32:24

游戏哪些接口会暴露源IP？_深度解析服务器通信安全隐患

一、用户认证体系中的IP泄露陷阱在游戏登录验证环节，采用明文传输的HTTP协议接口会将客户端IP直接暴露在TCP握手阶段。某头部MOBA游戏曾因使用HTTP Basic认证方式，导致黑客通过抓取三次握手数据包获取服务器真实IP。游戏行业权威测试显示，使…...

编程日记 2025/6/1 17:07:59

树莓派学习专题＜11＞：使用V4L2驱动获取摄像头数据--启动/停止数据流，数据捕获，缓存释放

树莓派学习专题＜11＞：使用V4L2驱动获取摄像头数据--启动/停止数据流，数据捕获，缓存释放 1. 启动和停止数据流2. 捕获数据3. 释放缓存 1. 启动和停止数据流使用命令 VIDIOC_STREAMON 启动摄像头数据流，使用…...

编程日记 2025/6/1 16:47:11

adb push 报错：CreateProcess failure, error 123

客户使用adb push 可执行程序的时候报错如下所示原因：文件目录里边带中文导致解决方法：将文件目录里中文改成英文就好了...

编程日记 2025/6/1 17:31:54

【实战篇】数字化打印——打印格式设计器的功能说明

前言 myBuilder内置了覆盖丰富场景的打印格式设计器，效果统一，功能完善。设计器一：小票用于设计小票、水单等滚筒纸张的场景，例如：超市购物小票主要功能打印格式的保存、下载、上传设计时功能：撤销…...

编程日记 2025/5/22 9:15:05

【数据挖掘】时间序列预测-时间序列预测策略

时间序列预测策略 （1）单步预测与多步预测（2）直接多步预测（3）递归多步预测（4）直接递归的混合预测（5）多输入多输出预测 （1）单步预测与多…...

编程日记 2025/5/31 15:52:26

京东商品详情数据爬取难度分析与解决方案

在当今数字化商业时代，电商数据对于市场分析、竞品研究、价格监控等诸多领域有着不可估量的价值。京东，作为国内首屈一指的电商巨头，其商品详情页蕴含着海量且极具价值的数据，涵盖商品价格、库存、规格、用户评价等关键信息。然而…...

编程日记 2025/5/15 1:53:19

【Linux】线程

一.线程概念我们在学习进程的时候已经知道了，进程内核数据结构pcb自己的代码和数据。那么单单一个task_struct是什么呢？ 我们将单个的task_struct叫做轻量级进程，而这个轻量级进程也叫做线程。以往我们在了解进程的时候，一个进…...

编程日记 2025/5/28 15:07:07

WPF-遵循MVVM框架创建图表的显示【保姆级】

文章速览 1、技术栈实现步骤1、创建WPF工程项目2、引入框架 Caliburn.Micro、数据可视化库ScottPlot.WPF3、创建文件夹，并创建相应的View & ViewModel4、创建启动类5、将启动类设置为启动项6、编写View7、编写VM8、将VM和View中的图表进行绑定9、备注示例效果 …...

编程日记 2025/5/17 22:01:56

深入详解人工智能数学基础—概率论-KL散度在变分自编码器（VAE）中的应用

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...

编程日记 2025/5/27 4:59:48

《代码整洁之道》第9章单元测试 - 笔记

测试驱动开发 (TDD) 是一种编写整洁代码的“规程”或“方法论”，而不仅仅是测试技术。 JaCoCo 在运行测试后生成详细的覆盖率报告的工具， maven 引用。测试驱动开发测试驱动开发（TDD）是什么？ TDD 不是说写完代码…...

编程日记 2025/5/27 6:22:19

每日c/c++题备战蓝桥杯(P2392 kkksc03考前临时抱佛脚)

【题解】期末考试抱佛脚最短时间（动态规划 | 二进制背包） 题目链接题目背景 kkksc03 的大学生活非常颓废，临近期末考试才开始疯狂复习。他有 4 门科目需要复习，每一科都有若干道题目，每道题目需要一定的时间完成。…...

编程日记 2025/5/17 11:12:05

徽客松S1 | 合肥首场 AI 黑客松招募

越来越多的黑客松在各个城市出现！5 月 10 日，合肥，12 小时极速挑战。我们和本次「徽客松」发起人 SDL 也是在一个黑客松上相识。当你的城市还没有黑客松可参加，与其等待，不如学习 SDL，自己发起一个&#…...

编程日记 2025/5/26 18:26:22

单片机-89C51部分：6、按键

飞书文档https://x509p6c8to.feishu.cn/wiki/EtkHw8MG0ipz3NkHlZEcwpEnn4g 一、应用场景： 轻触开关、按键、电容开关、光栅传感器、微动、关电开关二、原理： 轻触按键可以理解为两根导线，按下时导线连接，松开时导线断开。我们可…...

编程日记 2025/6/2 8:40:12

小结: DHCP

交换机的物理接口分批地址池、全局分配地址池分批地址池（接口地址池/局部分配） 按物理接口（如 VLAN 接口、SVI、物理端口）划分，每个接口单独配置一个小型地址池。适合规模较小、子网划分清晰的场景。配置方法示例&…...

编程日记 2025/6/3 15:44:16

matlab simulink中理想变压激磁电流容易有直流偏置的原因分析。

simulink把线性变压器模块拉出来，设置没有绕线电阻的变压器，激磁电感和Rm都有，然后给一个50%占空比的方波，幅值正负10V，线路中设置一个电阻，模拟导线阻抗。通过示波器观察激磁电流，发现电阻越小…...

编程日记 2025/5/23 23:27:08

国产三维CAD皇冠CAD在「通用设备制造业」建模教程：台式起重机

在制造业数字化转型的浪潮中，三维CAD软件已成为装备设计的核心工具，而国产软件的崛起正悄然改变行业格局。皇冠CAD（CrownCAD）作为中国自主研发的云端三维CAD平台，凭借全栈可控的底层架构、高效协同的设计流程及复杂场景…...

编程日记 2025/6/2 6:05:42

Day 12

文件操作文件文件操作文件函数课堂笔记文件 1）概述 FILE 所有平台的名字都一样，FILE 是一个结构体类型,里面的成员功能一样,不同平台成员的名字不一样。 FILE *fp 1、fp指针，只用调用了fopen().在堆区分配空间,把地址返回给fp 2、fp指针…...

编程日记 2025/5/22 11:01:08

Lua 第11部分小插曲：出现频率最高的单词

在本章中，我们要开发一个读取并输出一段文本中出现频率最高的单词的程序。像之前的小插曲一样，本章的程序也十分简单但是也使用了诸如迭代器和匿名函数这样的高级特性。该程序的主要数据结构是一个记录文本中出现的每一个单词及其出现次数之间关系的表。…...

编程日记 2025/5/29 13:38:13

自然语言处理之机器翻译：注意力机制在低资源翻译中的突破与哲思

## 被忽视的7000种语言在人工智能翻译技术突飞猛进的今天，一个残酷的事实被刻意掩盖：全球7000种语言中，超过95%缺乏构建现代机器翻译系统所需的基础资源。当我们在庆贺Transformer模型将英德翻译BLEU值推高至40%时，那些承载着人类文明基因的少数民族语言，正在经历着前所未…...

编程日记 2025/5/31 7:40:38

SQL 处理重复数据之技巧（Techniques for Handling Duplicate Data with SQL）

SQL 处理重复数据之技巧 ❝ 在日常数据库操作中，我们经常会遇到重复数据的问题。重复数据不仅会占用存储空间，还可能导致数据分析结果不准确。本文将详细讲解 SQL 中处理重复数据的常用方法，帮助你更高效地管理数据库中的数据。一、为什么会…...

编程日记 2025/5/18 4:31:11

Redis01-基础-入门

零、文章目录 Redis01-基础-入门 1、认识 NoSQL NoSQL 知识请参考：https://blog.csdn.net/liyou123456789/article/details/132612444 2、认识 Redis （1）简介 Redis（Remote Dictionary Server，远程字典服务&…...

编程日记 2025/6/4 16:12:53

辞九门回忆

2025年月日，13~30℃，挺好的待办： 《高等数学2》期末试卷高数重修电子版材料冶金《物理》期末试卷《物理[2]》期末试卷批阅冶金《物理》作业→→统计平时成绩遇见：遇见一位小姐姐。感受或反思：不主动推动关系&a…...

编程日记 2025/5/26 10:52:31

全球城市范围30米分辨率土地覆盖数据（1985-2020）

Global urban area 30 meter resolution land cover data (1985-2020) 时间分辨率年空间分辨率10m - 100m共享方式保护期 277 天 5 时 42 分 9 秒数据大小：8.98 GB数据时间范围：1985-2020元数据更新时间2024-01-11 数据集摘要 1985~2020全球城市土地覆…...

编程日记 2025/5/19 7:16:14

java编程式、声明式事务简单介绍

大家吼鸭！今天学习新项目的时候，项目中运用了编程式项目，有点不理解什么叫编程式事务，于是我去查询了一些资料，大概了解了一下。现在做一个简单的介绍。编程式事务和声明式事务的区别现在想象一个场景，…...

编程日记 2025/6/3 8:50:44

Golang 遇见 Kubernetes：云原生开发的完美结合

Golang 和 Kubernetes 简介 Golang 概述 Golang，也称为 Go，是由 Google 开发的一种开源编程语言。Go 由 Robert Griesemer、Rob Pike 和 Ken Thompson 设计，于 2009 年首次发布，此后在各个领域都获得了广泛的关注，尤其…...

编程日记 2025/5/15 5:09:03

第三章，GRE和MGRE

VPN---虚拟专用网络 VPN的核心技术----隧道技术---封装 GRE---通用路由封装配置 GRE的配置： R1： [r1]interface Tunnel 0/0/0 ---创建一个虚拟的隧道接口 [r1-Tunnel0/0/0]ip address 192.168.3.1 24 ---给隧道接口分配一个IP地址 [r1-Tunnel0/0/0]t…...

编程日记 2025/5/14 21:49:48

redis常用集合操作命令

在 Redis 的命令行界面（redis-cli）中， Redis 的集合（Set）是无序的，且集合中的元素是唯一的。Redis 本身没有直接提供获取集合中某个特定属性的命令，因为集合中的元素是简单的值，而不…...

编程日记 2025/5/22 10:48:37

vue3中ref在js中为什么需要.value才能获取/修改值？

文章目录 [TOC](文章目录) 一、ref定义值什么情况下需要.value1. 情况1:在js中需要使用.value2. 情况2:在html模版中不需要使用.value3. 情况31.代码2.效果3. 二、重新了解一下vue2和vue3的响应式1.vue2（Object.defineProperty）2.vue3（proxy&…...

编程日记 2025/6/1 16:03:47

使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习

这篇文章给大家分享一个适合练习学习前端技术的项目：校园二手交易平台系统。因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下我做的这个项目的一些功能，如…...

编程日记 2025/5/31 8:03:04

效果图展示插件安装 npm i wavesurfer实现过程  <template>…...

编程日记 2025/5/18 11:08:01

Golang 类型方法

在 Go 语言中，方法绑定到任意类型的特性可以称为 “类型方法（Type Methods）” 或 “接收者方法（Receiver Methods）”，它体现了以下几种核心编程思想： 1. 官方术语：接收者方法&#x…...

编程日记 2025/5/29 12:36:25

多模态常见面试题

多模态常见面试一、最近关注的论文，多模态视觉大模型(CLIP,DALLE)？二、blip2的架构，优势和之前多模态模型的区别？三、多模态融合后，怎样知道最终结果受哪种模态影响更大？四、多模态中常见的SOTA模型有哪些…...

编程日记 2025/5/29 16:41:48

LangChain构建大模型应用之RAG

RAG（Retrieval-augmented Generation 检索增强生成）是一种结合信息检索与生成模型的技术，通过动态整合外部知识库提升大模型输出的准确性和时效性。其核心思想是在生成答案前，先检索外部知识库中的相关信息作为上下文依据&#xf…...

编程日记 2025/5/27 7:24:39

Git 全面解析：从核心概念到生态应用

Git 一、Git 起源与定位诞生背景：2005 年由 Linus Torvalds 为管理 Linux 内核开发而设计，因 BitKeeper 许可证争议，急需分布式版本控制系统（DVCS）替代集中式工具（如 SVN）。核心优势&#x…...

编程日记 2025/5/21 19:32:15

国产免费工作流引擎star 5.9k，Warm-Flow版本升级1.7.0(新增大量好用功能)

国产免费工作流引擎star 5.9k，Warm-Flow版本升级1.7.0（新增大量好用功能） 主要更新内容项目介绍功能思维导图设计器流程图演示地址官网Warm-Flow视频之前大家一直吐槽没有撤销、驳回到上一个任务和拿回等功能，此次版本全都带给大…...

编程日记 2025/5/26 10:26:51

camera知识学习

1、DSP DSP（数字信号处理器），这个是介于sensor和ISP处理的一个处理阶段，会进行一些传感器方面的偏硬件处理，再进行数据格式的转换，将raw数据转换成RGB数据或者YUV数据...

编程日记 2025/5/18 2:38:25

Java高频常用工具包汇总

Java高频常用工具包汇总 Java生态系统中有许多广泛使用的工具包，以下是一些高频常用的工具包分类汇总： 1. 核心工具包 Apache Commons系列 Commons Lang - 提供各种基础工具类Commons IO - 文件/IO操作工具Commons Collections - 集合扩展工具Commons …...

编程日记 2025/5/25 10:10:36