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

Vue3学习（组合式API——ref模版引用与defineExpose编译宏函数）

news 来源：原创 2025/8/7 16:43:14

目录

一、ref模版引用。

（1）基本介绍。

（2）核心基本步骤。(以获取DOM、组件为例)

（3）案例：获取dom对象演示。

<1>需求：点击按钮，让输入框聚焦。

（4）案例：获取组件实例内的属性和方法。(defineExpose编译宏函数)

二、ref模版引用与defineExpose编译宏函数小结。

一、ref模版引用。

（1）基本介绍。

ref 模板引用是 Vue 提供的直接操作 DOM 或子组件的工具。
（通过ref标识获取页面中真实的dom对象或者组件实例对象，从而就可以调用dom里面的属性和方法、组件内的属性和方法）
在 Vue3 组合式 API 中，ref 模板引用是用于在 JavaScript 中直接获取 DOM 元素或子组件实例引用的机制。

（2）核心基本步骤。(以获取DOM、组件为例)

使用 ref 函数创建一个（ref对象）响应式引用（如 const inputRef = ref(null)）。其中初始值通常设为 null（表示无引用）。
通过 ref 指令将变量与 DOM 元素或子组件关联。（如 <input ref="inputRef" /> 或 <ChildComponent ref="childRef" />）。这一步就是通过ref标识绑定ref对象到标签。
模板渲染完成后！！ref 变量会自动指向对应的 DOM 元素或子组件实例。可在 onMounted 钩子（生命周期函数）或其他逻辑中使用。

（3）案例：获取dom对象演示。

<1>需求：点击按钮，让输入框聚焦。

代码示例。

<script setup>
//ref模版引用
import {onMounted, ref} from "vue";
//1.调用ref函数，生成一个ref对象
const input = ref(null)//使用生命周期钩子：onMounted
onMounted(() => {//可以在页面渲染完成后，输入框自动聚焦/*input.value.focus()*/
})const inputFocus = () =>{console.log(input.value)//3.通过ref对象.value即可访问绑定到的元素（必须渲染完成后才能拿到）input.value.focus()
}
</script><template><div>
<!--    2.通过ref标识，进行绑定 --><input ref="input" type="text"><button @click="inputFocus" style="margin-left: 10px">点击让输入框聚焦</button></div>
</template><style scoped>
</style>

效果。

（4）案例：获取组件实例内的属性和方法。(defineExpose编译宏函数)

默认情况下：<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的！

想在父组件访问到可使用 defineExpose 编译宏指定属性、方法允许访问！！
App.vue代码示例。
<script setup>
//引入子组件
import Test from "./components/Test.vue";
//ref模版引用
import {ref} from "vue";
//1.调用ref函数，生成一个ref对象
const testRef = ref(null)
const getTest = () => {console.log(testRef.value)
}
</script><template><div><h1>父组件App.vue</h1><div class="test"><Test ref="testRef"></Test><button @click="getTest">获取组件内部属性和方法</button></div></div>
</template><style scoped>
.test {border: 1px solid #000;padding: 10px;
}
</style>
Test.vue代码示例。
<script setup>
const count = 999
const sayHi = () =>{console.log('打招呼')
}
defineExpose({count,sayHi
})
</script><template><div><h2>我是用于测试的组件</h2></div>
</template><style scoped></style>
页面渲染效果。

父组件中通过ref模版引用获取组件实例并使用组件内部的属性和函数。

二、ref模版引用与defineExpose编译宏函数小结。

获取ref模版引用的时机是：组件挂载完毕之后！
defineExpose编译宏函数的作用：显示暴露组件内部的属性和方法(函数)。

Vue3学习（组合式API——ref模版引用与defineExpose编译宏函数）

目录一、ref模版引用。 （1）基本介绍。 （2）核心基本步骤。(以获取DOM、组件为例) （3）案例：获取dom对象演示。 <1>需求：点击按钮，让输入框聚焦。 （4&…...

编程日记 2025/8/7 16:43:14

Zephyr OS 中的 FIFO 接口应用介绍

目录概述 1 FIFO的接口函数 1.1 K_FIFO_DEFINE函数 1.2 k_fifo_init函数 1.3 k_fifo_put函数 1.4 k_fifo_get 函数 1.5 k_fifo_is_empty 函数 2 应用验证 2.1 UART中使用FIFO范例 2.2 生产-消费类型范例 3 注意事项 3.1 内存管理 3.2 线程安全边界概述 Zephy…...

编程日记 2025/8/5 5:01:58

前端基础之CSS

基本语法规范引入方式 1.内部引入 <style>p{color:blue ;font-size:30px;}</style> 2.行级引入 <p style "color : green ;font-size : 40px;">hello ,wyx</p><p>hello , wyx1</p><h1>hello , wyx2</h1> 3.外…...

编程日记 2025/8/2 13:52:31

【Linux网络】DNS与ICMP

DNS(Domain Name System) DNS是一整套从域名映射到IP的系统。 DNS背景 TCP/IP使用IP地址和端口号来确定网络上的一台主机的一个程序。但是IP地址不方便记忆。于是人们发明了一种叫主机名的东西，是一个字符串，并且使用hosts文件来描述主机名和IP地址的…...

编程日记 2025/8/7 16:41:02

第二十七天打卡

一些函数 for i in range(2, 10000):if is_prime(i):print(i) if ...: 这是 Python 里的条件判断语句，当 is_prime(i) 的返回值为 True 时，就会执行 if 语句块里的代码。 func.__name__ 的作用 func.__name__ 是 Python 中函数对象的一个特殊属性&am…...

编程日记 2025/8/6 11:17:48

38-日语学习小程序

系统功能特点： 技术栈: springBootVueMysqlUni-app 功能点: 用户端管理员端用户端: 1.首页: 轮播图展示、N2词汇列表、网站公告列表 2.学习模块: 有五十音图词汇语法 3.社区模块: 可进行发帖也可查看帖子进行回复可查看小组 4.我的: N2词汇(点击查看详情…...

编程日记 2025/8/3 16:49:54

信贷风控笔记6——风控常用指标（面试准备14）

一、PSI： 1.计算过程：变量分箱10-20箱；统计各分箱内样本占比； 算各个分箱的index（实际占比-预期占比）*ln（实际占比/预期占比）； 将各分箱index求和得PSI 2.情况分类&…...

编程日记 2025/8/6 14:39:24

UDP三种通信方式

单播（Unicast） 单播是最常见的通信方式，数据从一个发送方传输到一个特定的接收方。发送方将数据包发送到接收方的IP地址和端口号，接收方通过监听指定的端口接收数据。单播适用于一对一的通信场景。 import java.net.DatagramPac…...

编程日记 2025/8/7 16:36:39

Windows运维工具批处理版

测试环境：windows10 必看： 1.新建记事本，另存为：文件类型所有文件，文件名运维.bat，编码ansi，复制代码，保存，双击运行 2.有的功能需要输入管理员密码，如果没…...

编程日记 2025/8/7 16:38:05

无需配置光猫，使用网管交换机配合路由器的IPTV功能实现单线复用

一、背景弱电箱和电视柜只预留了一根网线，路由器放在电视柜，想实现既可以上网又可以正常观看iptv，本文提供了一种方法。二、准备工作 1、带iptv功能的路由器；2、水星sg105pro网管交换机；3、网线若干； …...

编程日记 2025/8/7 16:34:20

Elasticsearch 官网阅读之 Term-level Queries

Term-level Queries 参考：https://www.elastic.co/docs/reference/query-languages/query-dsl/query-dsl-exists-query 一、Term Query Term Query 是 term 精准查询。需要注意的是，在进行 Term Query 的时候，要避免 text 类型的字段&#x…...

编程日记 2025/8/7 16:39:42

医疗大模型技术演进与行业应用全景

摘要本文系统梳理医疗大模型技术架构的三大演进阶段，深度解析Transformer架构优化、多模态融合、模型压缩等核心技术突破。结合Google Med-PaLM、启真医疗大模型等16个典型行业案例，揭示医疗大模型在诊断辅助、药物研发、医院管理等九大场景的应用成效。基于权威评测数据，…...

编程日记 2025/8/7 16:34:23

【软考 McCabe度量法】

McCabe度量法（McCabe’s Cyclomatic Complexity）是由Thomas McCabe提出的一种用于衡量程序模块环路复杂性的软件度量方法。它通过分析代码的控制流结构来评估程序的复杂度，帮助开发者识别难以维护或测试风险较高的代码区域。一、McCabe度量法…...

编程日记 2025/8/7 16:36:15

LabVIEW光谱信号仿真与数据处理

在光谱分析领域，LabVIEW 凭借其图形化编程、丰富函数库及强大数据处理能力，成为高效工具。本案例将介绍如何利用 LabVIEW 仿真光谱信号，并对实际采集的光谱数据进行处理，涵盖信号生成、数据采集、滤波、分析及显示等环节。一…...

编程日记 2025/8/7 16:34:12

从零开始认识 Node.js：异步非阻塞的魅力

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。它的设计目标是让开发者能够用 JavaScript 构建高性能、可扩展的网络应用。以下是关于 Node.js 的详细介绍： 1. 核心特点事件驱动与非阻塞 I/O&…...

编程日记 2025/8/6 21:49:33

ECMAScript 2018（ES2018)：异步编程与正则表达式的深度进化

1.版本背景与发布发布时间：2018年6月，由ECMA International正式发布，标准编号为ECMA-262 9th Edition。历史意义：作为ES6之后的第三次年度更新，ES2018聚焦于异步编程、正则表达式和对象操作的标准化，推动…...

编程日记 2025/8/4 6:03:50

【gitee 初学者矿建仓库】

简易的命令行入门教程: Git 全局设置: git config --global user.name "你的名字"触摸 git config --global user.email "你的邮箱"创建 git 仓库: mkdir codestore cd codestore git init -b "main" touch README.md # 选择运行 git add REA…...

编程日记 2025/8/7 16:34:13

Java 类和对象

文章目录类和对象实例化对象this构造和初始化封装访问修饰限定符包自定义包 static代码块类和对象 Java当中一切皆对象对象是什么呢？ 比如是一个人，手机等怎么描述对象呢？ 可以用类描述对象，可以理解类为一个模版，用…...

编程日记 2025/8/3 18:05:22

湖北理元理律师事务所：科学债务管理模型构建实录

债务问题本质是资源错配问题。湖北理元理律师事务所基于400案例的司法大数据，提炼出一套“三阶九步”债务管理模型，本文从技术视角解析其运作逻辑与实操价值。模型架构：从诊断到执行的全周期管理阶段一：债务体检（1…...

编程日记 2025/8/6 17:27:40

JavaScript vs Python 用于 Web Scraping（2025）：终极对比指南

1. 引言在不断发展的 Web Scraping 领域，选择合适的编程语言对于项目的成功至关重要。虽然 JavaScript 和 Python 在 2025 年仍然是 Web Scraping 领域的热门选择，但它们各自具备不同的优势和挑战。本指南将深入分析 JavaScript 和 Python 的核心特性…...

编程日记 2025/8/2 13:35:31

数据结构day3

一、gdb调试 gcc -g main.c linklist.c // 对两个.c文件进行编译,生成 a.out 文件 gdb a.out //调试可执行文件 a.out b linklist.c:36 // 在该.c文件第 36 行设置断点 r // 运行程序,但会在断点前停…...

编程日记 2025/8/7 16:39:43

VSCode launch.json 配置参数详解

使用 launch.json 配置调试环境时，会涉及到多个参数，用于定义调试器的行为和目标执行环境。以下是一些常用的配置参数： 1、"type" ：指定调试器的类型，例如 "node" 表示 Node.js 调试器&#xff0…...

编程日记 2025/7/30 20:14:00

[已解决] LaTeX “Unicode character“ 报错 (中文字符处理)

问题： 写 LaTeX 文档，特别是包含中文时，经常遇到类似下图的 “Unicode character XXXXXX” 报错 (X) Unicode character 本 (U672C) LaTeX [行 xx, 列 x] (X) Unicode character 报 (U62A5) LaTeX [行 xx, 列 x] ...这通常意味着我们的 LaTe…...

编程日记 2025/8/7 16:36:13

c++成员函数返回类对象引用和直接返回类对象的区别

c成员函数返回类对象引用和直接返回类对象的区别成员函数直接返回类对象（返回临时对象，对象拷贝） #include <iostream> class MyInt { public:int value;//构造函数explicit MyInt(int v0) : value(v){}//加法操作,返回对象副本&…...

编程日记 2025/8/7 16:41:40

python项目参考文献

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/8/6 12:10:39

Go语言实现链式调用

在 Go 语言中实现链式调用（Method Chaining），可以通过让每个方法返回对象本身（或对象的指针）来实现。这样每次方法调用后可以继续调用其他方法。示例：实现字符串的链式操作假设你想对一个字符串连续执行…...

编程日记 2025/8/1 12:52:10

深入解析SpringMVC：从入门到精通

上文了解到SpingBoot的相关知识，此文开启Sping家族下的新篇章 1. 什么是SpringWebMVC？ 官方对于SpringMVC的描述是这样的： 什么是Servlet呢? Servlet 是⼀种实现动态页面的技术.准确来讲Servlet是⼀套JavaWeb开发的规范，或者说…...

编程日记 2025/8/6 22:44:41

Java-Collections类高效应用的全面指南前言一、Collections 类概述二、Collections 类的基础方法2.1 排序操作2.1.1 sort方法2.1.2 reverse方法2.1.3 shuffle方法 2.2 查找与替换操作2.2.1 binarySearch方法2.2.2 max和min方法2.2.3 replaceAll方法三、Collections 类的高级应…...

编程日记 2025/8/3 5:16:00

微软家各种copilot的AI产品：Github copilot、Microsoft copilot

背景大家可能听到很多copilot，比如 Github Copilot，Microsoft Copilot、Microsoft 365 Copilot，有什么区别 Github Copilot：有网页版、有插件（idea、vscode等的插件），都是面向于程序员的。Mi…...

编程日记 2025/8/3 1:17:05

JAVA EE_HTTP

为什么意气风发的少年，总是听不进去别人的劝解。 ----------陳長生. ❀主页：陳長生.-CSDN博客❀ 📕上一篇：JAVA EE_网络原理_数据链路层-CSDN博客 1.HTTP 1.1.HTTP是什么 H…...

编程日记 2025/8/3 18:31:19

SEO 优化实战：ZKmall模板商城的 B2C商城的 URL 重构与结构化数据

在搜索引擎算法日益复杂的今天，B2C商城想要在海量信息中脱颖而出，仅靠优质商品和营销活动远远不够。ZKmall模板商城以实战为导向，通过URL 重构与结构化数据优化两大核心策略，帮助 B2C 商城实现从底层架构到搜索展示的全面升级&…...

编程日记 2025/8/4 5:43:10

使用HtmlAgilityPack采集墨迹天气中的天气数据

需要解析对应的HTML源码： <div class"left"><div class"wea_alert clearfix"><ul><li><a href "https://tianqi.moji.com/aqi/china/jiangxi/hukou-county" >< span class"level level_2&qu…...

编程日记 2025/7/16 5:41:31

广和通L610模块通过AT指令访问服务器方案：嵌赛使用

实现步骤及关键点： 网络连接配置 ATCGDCONT1,"IP","APN名称" // 设置APN ATCGACT1,1 // 激活PDP上下文 ATCGATT1 // 附着GPRS网络 HTTP协议支持验证 L610支持HTTP客户端功能，关键指…...

编程日记 2025/8/3 21:19:50

nodejs快速入门到精通1

参考 nodejs快速入门到精通菜鸟教程-nodejs nodejs官方文档原因视频免费资料收费笔记还是自己写吧安装 nodejs官网 windows下： #查看nodejs版本 node -v #查看npm版本 npm -v #设置npm为淘宝镜像源 npm config set registry https://registry.npmmirror.…...

编程日记 2025/7/28 20:11:36

Linux下软件安装

一、软件安装方式在 Linux 系统中，常见的软件安装方式有以下几种： 包管理器安装（如 yum、apt） 这是最便捷的安装方式，通过系统自带的包管理器从官方软件源下载并安装软件。 # CentOS/RHEL系统使用yum安装 yum insta…...

编程日记 2025/8/5 1:19:30

React Fiber 架构深度解析：时间切片与性能优化的核心引擎

文章目录前言一、Fiber 架构的诞生背景二、Fiber 架构的核心概念1. Fiber 节点2. Fiber 节点的结构3. 双缓存机制4. 增量渲染与优先级调度三、时间切片技术详解1. 时间切片的定义与原理2. 时间切片与 JavaScript 事件循环3. 时间切片的实现方式4. 时间切片的优势四、Fiber 架…...

编程日记 2025/8/3 20:30:01

mcp学习笔记

MCP（Model Context Protocol）是一种由Anthropic推出的开放协议，旨在统一大型语言模型（LLM）与外部数据源/工具之间的交互。其核心组件包括 MCP Client、MCP Server 和 Function Calling 机制，三者协…...

编程日记 2025/8/5 8:14:54

鸿蒙北向源码开发: 检查应用接口dts文件api规范性

开源鸿蒙5.0.2对应的api版本是14 5.0社区仓有工具检查接口规范性报告工具: interface/sdk-js/build-tools/api_check_plugin api_check_plugin是什么? 在解释api_check_plugin是什么之前得先知道应用调用的api接口都是文件名后缀为.d.ts的文件,这些文件内部声明了arkts的a…...

编程日记 2025/8/6 23:22:42

Redis设计与实现——分布式Redis

Redis Sentinel（哨兵） Sentinel 的工作机制故障检测（Failure Detection） 主观下线（Subjective Down）：单个 Sentinel 实例检测到主节点在30 秒内无响应，标记其为 SDOWN。客观下线…...

编程日记 2025/8/5 16:04:24

【Redis】Hash 哈希

文章目录常用命令hsethgethmgethexistshkeyshvalshgetallhdelhlenhsetnxhincrbyhincrbyfloat 内部编码应用场景 Redis 存储键值对，也就是 key - value，不过同时也允许 value 也为键值对，但此时为了避免冲突，为 field - value PS…...

编程日记 2025/8/7 11:43:55

【matlab技巧】通过手绘的方法设计二维运动轨迹，附MATLAB程序

代码提供了一种直观的方式来使用鼠标在图形窗口中绘制线条，同时能够记录并显示用户绘制的轨迹坐标。用户通过左键点击绘制点，右键点击结束绘制，适合用于简单的图形交互和数据可视化。文章目录代码作用运行MATLAB源代码代码详解代码作用这…...

编程日记 2025/8/4 17:02:52

游戏引擎学习第290天:完成分离渲染

game_sim_region.cpp：在BeginSim中移除EntityOverlapsRectangle调用现在我们接近一个关键点，虽然还没完全结束，但我们已经把所有东西迁移到了一个新概念上——即那些临时创建的控制器结构，称为“脑”（brains&#xf…...

编程日记 2025/8/4 21:54:51

uniapp-商城-61-后台新增商品（添加商品到数据库）

完成商品的布局，完成商品的属性添加，最后的目的还是要完成数据添加，将我们前台的数据添加后台的数据库。 1、界面 2、点击提交完成商品添加点击下方的提交按钮，将数据添加到数据库。 onSubmit 使用该函数---见3 <view cla…...

编程日记 2025/8/4 21:22:28

深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第一篇：I2C总线协议深度解剖

第一篇：I2C总线协议深度解剖副标题 : 两根线如何征服千亿设备？详解硬件工程师必须掌握的通信奥义 1. 为什么I2C仍是嵌入式经典？ 1.1 总线拓扑的哲学拓扑对比图 SPI需4线N片选 vs I2C仅2线级联 UART点对点 vs I2C多主从架构成本控制实…...

编程日记 2025/8/2 20:31:12

QT之LayOut布局

文章目录 QFormLayoutQGridLayoutQFormLayout、QGridLayout、QHBoxLayout、QVBoxLayout综合案例用QFormLayout 代替界面左边部分的QGridLayout QFormLayout #include "widget.h"#include <QFormLayout> #include <QLineEdit>Widget::Widget(QWidget *p…...

编程日记 2025/8/3 1:19:39

ubuntu 24.04安装ros1 noetic

为了后续能够找到安装方法，记录一下： 参考如下链接安装： https://www.reddit.com/r/ROS/comments/158icpy/compiling_ros1_noetic_from_source_on_ubuntu_2204/ 安装步骤如下： 1.获取apt 包 sudo apt-get install python3-ros…...

编程日记 2025/8/6 23:04:32