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

VUE之组件通信(二)

1、v-model

v-model的底层原理:是:value值和@input事件的结合

$event到底是啥?啥时候能.target

  • 对于原生事件,$event就是事件对象 ,能.target
  • 对应自定义事件,$event就是触发事件时,所传递的数据,不能.target
<template><div class="father"><h3>父组件</h3><!-- v-model用在html标签上--><input type = "text" v-model="username"><!-- 双向绑定 --><!-- <input type="text" :value="username" @input="username=(<HTMLInput Element>$event.target).value">--><!-- v-model用在组件标签上--><AtMyInput v-model="username" /><!--等价于下面--><AtMyInput :modelValue="username"@update:modelValue="username = $event"/><!-- 修改modelvalue --><AtMyInput v-model:qwe="username" /><div>
</template><script setup lang="ts" name="Father">import {ref} from "vue";// 数据let username = ref('zhangsan')</script>>> AtMyInput.vue<template><input type="text" <!-- :value = "modelValue" -->:value = "qwe"<!-- @input="emit('update:modelValue',(<HTMLInput Element>$event.target).value)"> -->
@input="emit('update:qwe',(<HTMLInput Element>$event.target).value)">
</template><script setup lang="ts" name="AtMyInput"><!-- defineProps(['modelValue'])-->
defineProps(['qwe'])<!--  const emit = defineEmits(['update:modelValue']) -->const emit = defineEmits(['update:qwe'])
</script>

2、$attrs

1、概述:$attrs用于实现当前组件的父组件,向当前组件的子组件通信(祖->孙)

2、具体说明:$attrs是一个对象,包含所有父组件传入的标签属性。

注意:$attrs会自动排除props中声明的属性(可以认为声明过的props被子组件自己“消费”了)

<template><div class = "father"><h3>父组件</h3><h4>a:{{a}} </h4><h4>b:{{b}} </h4><h4>c:{{c}} </h4><h4>d:{{d}} </h4><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue'let a = ref(1)let b = ref(2)let c = ref(3)let d = ref(4)function updateA(value:number){a.value += value}
</script>
<template><div class = "child"><h3>子组件</h3><h4>a:{{a}} </h4><GrandChild v-bind="$attrs"/></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'defineProps(['a'])
</script>
<template><div class = "father"><h3>孙组件</h3><h4>a:{{a}}</h4><h4>b:{{b}}</h4><h4>c:{{c}}</h4><h4>d:{{d}}</h4><h4>x:{{x}}</h4><h4>y:{{y}}</h4><button @click="updateA(6)">点我将爷爷那的a进行更新</button><Child/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'defineProps(['a','b','c','d','x','y','updateA'])</script>

相关文章:

VUE之组件通信(二)

1、v-model v-model的底层原理&#xff1a;是:value值和input事件的结合 $event到底是啥&#xff1f;啥时候能.target 对于原生事件&#xff0c;$event就是事件对象 &#xff0c;能.target对应自定义事件&#xff0c;$event就是触发事件时&#xff0c;所传递的数据&#xff…...

Gauss高斯:建表语法,存储方式,OLTP和OLAP,系统时间,数组,分组(grouping set,rollup)

数据库和表的语法 数据库 表 oracle,高斯, hive的默认存储方式都是列式存储 存储方式 高斯数据库&#xff08;GaussDB&#xff09;支持列式存储和行式存储 OLTP 与 OLAP OLTP&#xff08;联机事务处理&#xff0c;Online Transaction Processing&#xff09;是一种用于管理…...

Java基础进阶

Java基础进阶 异常 概述 异常就是程序出现了不正常的情况 具体分为&#xff1a;Throwable—>(Error Exception);Exception—>(RuntimeException 非RuntimeException) Throwable类是Java语言中所有错误和异常的祖宗类&#xff1b;&#xff08;上面还有Object类) Thr…...

【数据结构】链表应用1

链表应用 面试题 02.02.返回倒数第k个节点题目描述思路解题过程复杂度 查找相同后缀题目描述解题思路完整代码&#xff1a; 删除绝对值相等的节点题目描述解题思路代码 面试题 02.02.返回倒数第k个节点 题目描述 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回…...

python gltf生成预览图

使用Python生成GLTF模型的预览图 随着3D技术的不断发展&#xff0c;GLTF&#xff08;GL Transmission Format&#xff09;逐渐成为了Web和移动应用程序中最流行的3D文件格式之一。GLTF文件不仅能以较小的体积存储复杂的3D模型&#xff0c;还支持动画、材质、光照和纹理等特性。…...

HTTP和HTTPS协议详解

HTTP和HTTPS协议详解 HTTP详解什么是http协议http协议的发展史http0.9http1.0http1.1http2.0 http协议的格式URI和URL请求request响应response http协议完整的请求与响应流程 HTTPS详解为什么使用HTTPSSSL协议HTTPS通信过程TLS协议 HTTP详解 什么是http协议 1、全称Hyper Tex…...

实战:利用百度站长平台加速网站收录

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/33.html 利用百度站长平台加速网站收录是一个实战性很强的过程&#xff0c;以下是一些具体的步骤和策略&#xff1a; 一、了解百度站长平台 百度站长平台是百度为网站管理员提供的一系列工…...

专门记录台式电脑常见问题

1、蓝屏死机&#xff0c;检查内存硬盘和cpu 2、拆内存条&#xff0c;用橡皮擦金手指 3、放主板静电&#xff0c;扣主板电池 4、系统时间不正确&#xff0c;主板电池没电 5、开机键坏了 6、电脑主机的风扇转&#xff0c;正常通电运行&#xff0c;但显示器没信号。看键盘的num键&…...

数据库系统概念第六版记录 一

1.关系型数据库 关系型数据库&#xff08;Relational Database&#xff0c;简称 RDB&#xff09;是基于关系模型的一种数据库&#xff0c;它通过表格的形式来组织和存储数据。每个表由若干行&#xff08;记录&#xff09;和列&#xff08;字段&#xff09;组成&#xff0c;数据…...

本地Ollama部署DeepSeek R1模型接入Word

目录 1.本地部署DeepSeek-R1模型 2.接入Word 3.效果演示 4.问题反馈 上一篇文章办公新利器&#xff1a;DeepSeekWord&#xff0c;让你的工作更高效-CSDN博客https://blog.csdn.net/qq_63708623/article/details/145418457?spm1001.2014.3001.5501https://blog.csdn.net/qq…...

Meta Sapiens AI论文解读:人类视觉模型基石初现,AI 未来走向何方?

一、引言 在本文中&#xff0c;我们将深入探讨 Meta AI 的一项新成果&#xff0c;该成果发表于一篇题为《Sapiens&#xff1a;人类视觉模型的基础》的研究论文中。这篇论文介绍了一系列模型&#xff0c;这些模型针对四项以人类为中心的基本任务&#xff0c;正如我们在上面的演示…...

输入类控件和多元素控件【QT】

文章目录 输入类控件QLineEdit Text EditCombo BoxSpin BoxDialSlider多元素控件QListWidget TableWidetTreeWidgetQGroupBoxTab Widget# QVBoxLayout# QHBoxLayoutQGridLayoutQFormLayout 输入类控件 QLineEdit 例如&#xff1a; 实现一个用户输入姓名 密码 电话 性别 的功能…...

一键开启/关闭deepseek

一键开启/关闭 Deepseek对应下载的模型一键开启 Deepseek&#xff0c;一键关闭Deepseek双击对应的bat&#xff0c;就可以启动https://mbd.pub/o/bread/Z56YmpZvbat 下载&#xff1a;https://mbd.pub/o/bread/Z56YmpZv 可以自己写下来&#xff0c;保存成bat文件&#xff0c;也可…...

gitea - fatal: Authentication failed

文章目录 gitea - fatal: Authentication failed概述run_gitea_on_my_pkm.bat 笔记删除windows凭证管理器中对应的url认证凭证启动gitea服务端的命令行正常用 TortoiseGit 提交代码备注END gitea - fatal: Authentication failed 概述 本地的git归档服务端使用gitea. 原来的用…...

Spring AI 智能体通过 MCP 集成本地文件数据

作者&#xff1a;刘军 Model Context Protocol&#xff08;MCP&#xff09;简介 模型上下文协议&#xff08;即 Model Context Protocol&#xff0c;MCP&#xff09; [ 1] 是一个开放协议&#xff0c;它规范了应用程序如何向大型语言模型&#xff08;LLM&#xff09;提供上下…...

音视频入门基础:RTP专题(5)——FFmpeg源码中,解析SDP的实现

一、引言 FFmpeg源码中通过ff_sdp_parse函数解析SDP。该函数定义在libavformat/rtsp.c中&#xff1a; int ff_sdp_parse(AVFormatContext *s, const char *content) {const char *p;int letter, i;char buf[SDP_MAX_SIZE], *q;SDPParseState sdp_parse_state { { 0 } }, *s1…...

MyBatis XML文件配置

目录 一、 配置连接字符串和MyBatis 二、书写持久层代码 2.1 添加Mapper接口 2.2 添加UserlnfoXMLMapper.xml 三、增删改查 3.1 、增&#xff08;Insert&#xff09; 3.2、删&#xff08;Delete) 3.3、改 (Update) 3.4、查 (Select) MyBatisXML的方式需要以下两步&am…...

【Leetcode 热题 100】1143. 最长公共子序列

问题背景 给定两个字符串 t e x t 1 text_1 text1​ 和 t e x t 2 text_2 text2​&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 0 0。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变…...

【算法】动态规划专题④ ——LCS(最长公共子序列)+ LPS(最长回文子序列) python

目录 前置知识LCS举一反三LPS 前置知识 【算法】动态规划专题③ ——二维DP python 子序列定义为&#xff1a; 不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 LCS 最长公共子序列 https://www.lanqiao.cn/problems/1189/learning/?p…...

Cesium点集中获取点的id,使用viewer.value.entities.getById报错的解决方法

错误代码&#xff1a; viewer.value.entities.getById(pickedObject.id) 报错&#xff1a; 可以正常获取movement.position但是一直出现如下报错&#xff0c;无法获得航点的id&#xff0c;通过断点定位为 viewer.value.entities.getById(pickedObject.id)导致的报错 解决方…...

360手机刷机 360手机解Bootloader 360手机ROOT

360手机刷机 360手机解Bootloader 360手机ROOT 问&#xff1a;360手机已停产&#xff0c;现在和以后&#xff0c;能刷机吗&#xff1f; 答&#xff1a;360手机&#xff0c;是肯定能刷机的 360手机资源下载网站 360手机-360手机刷机RootTwrp 360os.top 360rom.github.io 一、…...

深度探索DeepSeek-R1:AI大模型的本地应用与个人知识库构建

深度探索DeepSeek-R1&#xff1a;AI大模型的本地应用与个人知识库构建 引言 在当今这个信息爆炸的时代&#xff0c;如何高效地存储、处理和获取知识&#xff0c;已经成为每个人面临的挑战。想象一下&#xff0c;如果你能在没有互联网连接的情况下&#xff0c;构建一个属于自己…...

LabVIEW图像采集与应变场测量系统

开发了一种基于LabVIEW的图像采集与应变场测量系统&#xff0c;提供一种高精度、非接触式的测量技术&#xff0c;用于监测物体的全场位移和应变。系统整合了实时监控、数据记录和自动对焦等功能&#xff0c;适用于工程应用和科学研究。 项目背景 传统的位移和应变测量技术往往…...

解决DeepSeek服务器繁忙问题:本地部署与优化方案

deepseek服务器崩了&#xff0c;手把手教你如何在手机端部署一个VIP通道&#xff01; 引言 随着人工智能技术的快速发展&#xff0c;DeepSeek等大语言模型的应用越来越广泛。然而&#xff0c;许多用户在使用过程中遇到了服务器繁忙、响应缓慢等问题。本文将探讨如何通过本地部…...

今日AI和商界事件(2025-02-05)

今日AI领域的相关事件主要包括以下几个方面&#xff1a; 一、DeepSeek引发全球关注 性能与成本优势&#xff1a; DeepSeek推出的R1模型性能出色&#xff0c;成本较低&#xff0c;在全球AI行业引发震动。该模型在数学、代码处理等方面性能优异&#xff0c;受到广泛赞誉。 平台…...

SQL 秒变 ER 图 sql转er图

&#x1f680;SQL 秒变 ER 图&#xff0c;校园小助手神了&#xff01; 学数据库的宝子们集合&#x1f64b;‍♀️ 是不是每次碰到 SQL 转 ER 图就头皮发麻&#xff1f;看着密密麻麻的代码&#xff0c;脑子直接死机&#xff0c;好不容易理清一点头绪&#xff0c;又被复杂的表关…...

SQL server 创建DB Link 详解

在日常工作中&#xff0c;经常涉及到跨库操作&#xff0c;为使跨数据库的操作变得更加灵活高效&#xff0c;我们可以在 SQL Server 中建立数据库链接&#xff08; DB Link&#xff09;&#xff0c;实现 SQL Server 数据库与其他数据库&#xff08;如 Oracle, MySQL 等&#xff…...

25.2.5学习记录

今天主要学的是哈希表的理论知识&#xff0c;但是都是c实现&#xff0c;C语言的代码实现还没有完全搞明白。 在写题的时候&#xff0c;懵懂的学着正确代码&#xff0c;用C语言模拟实现哈希表去解题。 在哈希表的理论知识中&#xff0c;学到哈希函数&#xff0c;了解哈希冲突产…...

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结 1、一个数组解决很麻烦引出的问题1.1、RAW 文件尾部数据如下:1.2、自定义标头 ADD 或 DEL 的数据结构如下&#xff1a; 2、程序 C# 源代码的编写和剖析2.1、使用 ref 关键字&#xff0c;通过引用将参数传递&#xff0c;以…...

不可信的搜索路径(CWE-426)

漏洞描述&#xff1a;程序使用关键资源时&#xff08;如动态链接库、执行文件、配置文件等&#xff09;没有明确的指定资源的路径&#xff0c;而是依赖操作系统去搜索资源&#xff0c;这种行为可能被攻击者利用&#xff0c;通过在搜索优先级较高的目录放置不良资源&#xff0c;…...

Unity 2D实战小游戏开发跳跳鸟 - 记录显示最高分

上一篇文章中我们实现了游戏的开始界面,在开始界面中有一个最高分数的UI,本文将接着实现记录最高分数以及在开始界面中显示最高分数的功能。 添加跳跳鸟死亡事件 要记录最高分,则需要在跳跳鸟死亡时去进行判断当前的分数是否是最高分,如果是最高分则进行记录,如果低于之前…...

openeuler 22.03 lts sp4 使用 cri-o 和 静态 pod 的方式部署 k8s-v1.32.0 高可用集群

前情提要 整篇文章会非常的长…可以选择性阅读,另外,这篇文章是自己学习使用的,用于生产,还请三思和斟酌 静态 pod 的部署方式和二进制部署的方式是差不多的,区别在于 master 组件的管理方式是 kubectl 还是 systemctl有 kubeadm 工具,为什么还要用静态 pod 的方式部署?…...

穷举vs暴搜vs深搜vs回溯vs剪枝系列一>黄金矿工

目录 决策树&#xff1a;代码设计代码&#xff1a; 决策树&#xff1a; 代码设计 代码&#xff1a; class Solution {boolean[][] vis;int ret,m,n;public int getMaximumGold(int[][] grid) {m grid.length;n grid[0].length;vis new boolean[m][n]; for(int i 0; i <…...

SQL Server配置管理器无法连接到 WMI 提供程序

目录 第一步第二部 第一步 发现没有资源管理器 ​​​​ 在文件夹找到管理器 打开发现报这个错误 配置管理器无法连接到 WMI 提供程序第二部 https://blog.csdn.net/thb369208315/article/details/126954074...

微信小程序获取openid和其他接口同时并发请求如何保证先获取到openid

在微信小程序中,如果你需要并发请求获取 openid 和其他接口的数据,并且希望确保先获取到 openid 之后再进行后续操作,可以考虑以下几种方法: 方法一:使用 Promise 链 1, 先请求 openid:使用 Promise 来请求 openid。 2, 在获取到 openid 后再请求其他接口。 function g…...

为AI聊天工具添加一个知识系统 之87 详细设计之28 Derivation 统一建模元模型 之1

文本要点 要点 Derivation 统一建模元模型 Derivation 统一建模元模型&#xff1a;意识原型的祖传代码&#xff0c;即支撑 程序框架的 符号学中的 自然和逻辑树。 这棵树的雏形中描述了三种建模工件&#xff1a;语用钩子&#xff0c;语法糖和语义胶水。 三种工件对应的三“…...

java进阶知识点

java回收机制 浅谈java中的反射 依赖注入的简单理解 通过接口的引用和构造方法的表达&#xff0c;将一些事情整好了反过来传给需要用到的地方~ 这样做得好处&#xff1a;做到了单一职责&#xff0c;并且提高了复用性&#xff0c;解耦了之后&#xff0c;任你如何实现&#xf…...

63.视频推荐的算法|Marscode AI刷题

1.题目 问题描述 西瓜视频正在开发一个新功能&#xff0c;旨在将访问量达到80百分位数以上的视频展示在首页的推荐列表中。实现一个程序&#xff0c;计算给定数据中的80百分位数。 例如&#xff1a;假设有一个包含从1到100的整数数组&#xff0c;80百分位数的值为80&#xf…...

19.[前端开发]Day19-王者荣项目耀实战(二)

01_(掌握)王者荣耀-main-banner展示实现 完整代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...

Leetcode面试高频题分类刷题总结

https://zhuanlan.zhihu.com/p/349940945 以下8个门类是面试中最常考的算法与数据结构知识点。 排序类&#xff08;Sort&#xff09;&#xff1a; 基础知识&#xff1a;快速排序&#xff08;Quick Sort&#xff09;&#xff0c; 归并排序&#xff08;Merge Sort&#xff09;的…...

JPA使用@EntityGraph立即加载关联实体

在JpaRepository接口中实现自定义查询的时候&#xff0c;必然会遇到一个问题&#xff0c;通过findBy等语句查询出来的结果通常情况下不会加载到关联的实体。例如我有一个Material类&#xff0c;其中有一个属性supplier使用了多对一关联到Supplier类&#xff0c;并开启懒加载&am…...

python多版本管理工具之pyenv

pyenv 是一个用于管理多个 Python 版本的工具,允许用户在同一台机器上轻松安装、切换和隔离不同版本的 Python 解释器。它特别适合需要同时处理多个项目的开发者(例如,不同项目依赖不同 Python 版本的情况)。以下是 pyenv 的详细指南: 本文基于Ubuntu 22.04版本进行安装,…...

107,【7】buuctf web [CISCN2019 华北赛区 Day2 Web1]Hack World

这次先不进入靶场 看到红框里面的话就想先看看uuid是啥 定义与概念 UUID 是 Universally Unique Identifier 的缩写&#xff0c;即通用唯一识别码。它是一种由数字和字母组成的 128 位标识符&#xff0c;在理论上可以保证在全球范围内的唯一性。UUID 的设计目的是让分布式系…...

9. k8s二进制集群之kube-controller-manager部署

同样在部署主机上创建证书请求文件(为之后的证书生成做准备)根据上面的证书文件创建证书(结果会在当前目录下产生kube-controller-manager证书)创建kube-controller-manager服务配置文件创建kube-controller-manager服务启动文件同步kube-controller-manager证书到对应mast…...

keil 单步调试技巧

一、常见错误分析 warningerror警告错误 不影响编译过程 能够输出Hex文件 无法完成编译 不输出Hex文件 注意的是,warning的信息是要去关注的。 下面的UNCALLED SEGMENT除外 二、单步调试配置 1、在keil中添加单片机型号 本文不详细介绍,如有需要可查看这篇文章:...

[leetcode]两数之和等于target

源代码 #include <iostream> #include <list> #include <iterator> // for std::prev using namespace std; int main() { int target 9; list<int> l{ 2, 3, 4, 6, 8 }; l.sort(); // 确保列表是排序的&#xff0c;因为双指针法要求输入是…...

Go语言的转义字符

文章目录 1. Go语言的转义字符(escapechar)2. 小结和提示 1. Go语言的转义字符(escapechar) 说明:常用的转义字符有如下: \t : 表示一个制表符&#xff0c;通常使用它可以排版\n &#xff1a;换行符\\ &#xff1a;一个\\" &#xff1a;一个"\r &#xff1a;一个回…...

低代码系统-产品架构案例介绍、蓝凌(十三)

蓝凌低代码系统&#xff0c;依旧是从下到上&#xff0c;从左至右的顺序。 技术平台h/iPaas 指低层使用了哪些技术&#xff0c;例如&#xff1a;微服务架构&#xff0c;MySql数据库。个人认为&#xff0c;如果是市场的主流&#xff0c;就没必要赘述了。 新一代门户 门户设计器&a…...

【大数据技术】搭建完全分布式高可用大数据集群(Hadoop+MapReduce+Yarn)

搭建完全分布式高可用大数据集群(Hadoop+MapReduce+Yarn) jdk-8u361-linux-x64.tarhadoop-3.3.6.tar.gz注:请在阅读本篇文章前,将以上资源下载下来。 写在前面 本文主要介绍搭建完全分布式高可用集群Hadoop+MapReduce+Yarn的详细步骤。 注意: 统一约定将软件安装包存放…...

Rapidjson 实战

Rapidjson 是一款 C 的 json 库. 支持处理 json 格式的文档. 其设计风格是头文件库, 包含头文件即可使用, 小巧轻便并且性能强悍. 本文结合样例来介绍 Rapidjson 一些常见的用法. 环境要求 有如何的几种方法可以将 Rapidjson 集成到您的项目中. Vcpkg安装: 使用 vcpkg instal…...