Vue3【十五】标签的Ref属性

Vue3【十五】标签的Ref属性

标签的ref属性 用于注册模板引用
用在dom标签上,获取的是dom节点
用在组件上,获取的是组件实例对象

案例截图

ref标签

目录结构

标签Ref

代码

app.vue

<template><div class="app"><h1 ref="title2">你好世界! 我是App根组件</h1><button @click="showLog">点我输出h1标签></button><Person ref="rrr" /></div>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import { ref } from 'vue'let title2 = ref()
let rrr = ref()function showLog() {console.log(title2.value)console.log(rrr.value)
}// export default {
//     name: 'App', //组件名字
//     // 注册组件
//     components: {
//         Person
//     }
// }</script><style>
.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>

person.vue

<template><div class="person"><h1>标签ref属性</h1><h2 ref="title2">需求:转速大于2000时候换挡位,不能超过D6挡位</h2><h2>转速</h2><button @click="showLog">点击输出 ref = title2 的元素</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';// 标签的ref属性 用于注册模板引用
// 用在dom标签上,获取的是dom节点
// 用在组件上,获取的是组件实例对象// 创建一个title2的ref,用于存储ref标记的内容
const title2 = ref();
let a = ref(0);
let b = ref(1);
let c = ref(2);
function showLog() {console.log(title2.value);
}// 将ref对象暴漏给父组件
defineExpose({ a, b, c });</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对象创建的4种模式

1. 工厂模式 这种模式抽象了创建具体对象的过程&#xff0c;用函数来封装以特定接口创建对象的细节 缺点&#xff1a;没有解决对象识别的问题&#xff08;即怎样知道一个对象的类型&#xff09; function createPerson(name, age, job) {var o new Object();o.name name;o.ag…

MATLAB实现磷虾算法(Krill herd algorithm)

1.算法介绍 磷虾算法&#xff08;Krill Herd Algorithm, KH&#xff09;是一种基于生物启发的优化算法&#xff0c;其原理模拟了南极磷虾&#xff08;Euphausia superba&#xff09;群体的聚集行为。该算法旨在通过模拟磷虾个体间的相互作用、觅食行为和随机扩散&#xff0c;来…

glm-4-9b-chat-1m模型结构解读

glm-4-9b-chat-1m模型结构解读 模型代码文件下载 glm-4-9b-chat-1m模型总体结构 ChatGLMForConditionalGeneration((transformer): ChatGLMModel((embedding): Embedding((word_embeddings): Embedding(151552, 4096))(rotary_pos_emb): RotaryEmbedding()(encoder): GLMTran…

No ‘ChromeSansMM’ font 错误解决

No ‘ChromeSansMM’ font 错误解决 错误 class com.spire.ms.System.Exception: No ChromeSansMM font found! 背景 在使用 Spire.PDF 库处理 PDF 文件时&#xff0c;遇到了以下错误&#xff1a; class com.spire.ms.System.Exception: No ChromeSansMM font found! com.…

L2-002 链表去重(C++)

给定一个带整数键值的链表 L&#xff0c;你需要把其中绝对值重复的键值结点删掉。即对每个键值 K&#xff0c;只有第一个绝对值等于 K 的结点被保留。同时&#xff0c;所有被删除的结点须被保存在另一个链表上。例如给定 L 为 21→-15→-15→-7→15&#xff0c;你需要输出去重后…

【数据结构与算法 | 堆篇】力扣295

1. 力扣295 (1). 题 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() …

10进制与二、八、十六进制的转换

x进制转10进制 1、如八进制数123&#xff0c;通过把每一位数字和8的指数级进行相乘 1 * 8^2 2 * 8^1 3 * 8^01 * 64 2 * 8 3 * 164 16 383 2、十六进制1A3 1 * 16^2 A(即10) * 16^1 3 * 16^01 * 256 10 * 16 3 * 1256 160 3419 3、二进制1010 1 * 2^3 0 * 2…

基于机器学习的锂电池RUL SOH预测

数据集为NASA锂电池数据集。 import datetimeimport numpy as npimport pandas as pdfrom scipy.io import loadmatfrom sklearn.preprocessing import MinMaxScalerfrom sklearn.metrics import mean_squared_errorfrom sklearn import metricsimport matplotlib.pyplot as p…

C# MES通信从入门到精通(11)——C#如何使用Json字符串

前言 我们在开发上位机软件的过程中&#xff0c;经常需要和Mes系统进行数据交互&#xff0c;并且最常用的数据格式是Json&#xff0c;本文就是详细介绍Json格式的类型&#xff0c;以及我们在与mes系统进行交互时如何组织Json数据。 1、在C#中如何调用Json 在C#中调用Json相关…

【Golang】Go语言中defer与return的精妙交织:探索延迟执行与返回顺序的微妙关系

【Golang】Go语言中defer与return的精妙交织&#xff1a;探索延迟执行与返回顺序的微妙关系 大家好 我是寸铁&#x1f44a; 总结了一篇defer 和 return 返回值 的执行顺序探讨的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 在Go语言中&#xff0c;defer 和return是两…

二进制文件的膨胀策略和使用 debloat 消除膨胀测试

在恶意软件的分析中有的 Windows 可执行文件&#xff08;PE 文件&#xff09;会通过膨胀策略来绕过防病毒一些防病毒的检查&#xff0c;比如上传云进行分析&#xff0c;因为文件太大了所以无法进行一些防病毒分析。一般的可执行文件有很多的膨胀策略&#xff0c;一般简单的膨胀…

ovs网络配置命令

ovs 查看 OVS 版本查看当前配置的所有交换机查看交换机的详细信息创建和删除桥接添加和删除端口配置端口 Open vSwitch是一种生产质量的多层虚拟交换机&#xff0c;根据开源Apache 2.0许可证进行许可。它旨在通过编程扩展实现大规模网络自动化&#xff0c;同时仍然支持标准管理…

NettyのBufferChannelSelector用法

这一篇介绍Buffer&Channel&Selector的常见API使用案例 1、Buffer 1.1、从Buffe中读取/写入 以ByteBuffer为例。Buffer需要和Channel结合使用&#xff08;在上一篇中提到&#xff0c;通道是数据传输的载体&#xff0c;缓冲区是数据的临时存储区&#xff09;。 那么如何…

OSFP 1类LSA详解

概述 上图为1类LSA的实际报文结构 , 在开始之前一定需要说明 , 1类LSA是OSPF中最复杂的LSA类型 , 在LSA头部的文章中详细介绍了 LS Type / Link State ID / Adv Router 3种头部字段 , 在1类LSA的主体内容中还存在类似的字段十分的相似 , 很多网络从业者难以理解的点就在于此 , …

orbslam2代码解读(2):tracking跟踪线程

书接上回&#xff0c;mpTracker->GrabImageMonocular(im,timestamp)函数处理过程&#xff1a; 如果图像是彩色图&#xff0c;就转成灰度图如果当前帧是初始化的帧&#xff0c;那么在构建Frame的时候&#xff0c;提取orb特征点数量为正常的两倍&#xff08;目的就是能够在初…

vue3中$attrs与inheritAttrs的使用

Vue 3 引入了一些新特性和改进&#xff0c;其中之一就是对 $attrs 的处理方式。在 Vue 2 中&#xff0c;$attrs 包含了父组件传递给子组件的属性&#xff0c;但不包括子组件已经声明的 props。在 Vue 3 中&#xff0c;$attrs 的行为有所变化&#xff1a; 默认情况下&#xff0…

14. RTCP 协议

RTCP 协议概述 RTCP&#xff08;Real-time Transport Control Protocol 或 RTP Control Protocol 或简写 RTCP&#xff09;&#xff0c;实时传输控制协议&#xff0c;是实时传输协议&#xff08;RTP&#xff09;的一个姐妹协议。 注&#xff1a;RTP 协议和 RTP 控制协议&#…

Postgresql源码(135)生成执行计划——Var的调整set_plan_references

1 总结 set_plan_references主要有两个功能&#xff1a; 拉平&#xff1a;生成拉平后的RTE列表&#xff08;add_rtes_to_flat_rtable&#xff09;。调整&#xff1a;调整前每一层计划中varno的引用都是相对于本层RTE的偏移量。放在一个整体计划后&#xff0c;需要指向一个统一…

Material-UI create-react-app 创建移动端 H5

当使用 create-react-app 和 Material-UI 来创建移动端 H5 页面时,你需要考虑几个关键点来确保页面在移动设备上表现良好。以下是一些步骤和最佳实践: 创建 React 项目 使用 create-react-app 快速创建一个新的 React 项目: npx create-react-app my-mobile-app cd my-mobil…

京东一面测开(KPI)

京东一面测开凉经&#xff08;笔试ak&#xff09; 3.8 面试官&#xff1a;你很优秀啊&#xff0c;你不用谦虚 没问技术相关&#xff0c;问了如何设计测试用例步骤一些理论&#xff1a; 什么是软件测试&#xff1f;其目的是什么&#xff1f; 软件测试有哪些类型&#xff1f;请列…