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

Vue - 标签中 ref 属性的使用

在 Vue 3 中,ref 属性用于在模板中引用 DOM 元素或组件实例。通过 ref,可以直接访问这些元素或组件的实例,从而进行更复杂的操作,比如获取元素的尺寸、调用组件的方法等。

基本语法:

<template><div ref="myElement">Hello, Vue 3!</div>
</template><script setup>
import { ref, onMounted } from 'vue';const myElement = ref(null);onMounted(() => {// 访问 DOM 元素console.log(myElement.value); // 输出 DOM 元素
});
</script>

详细说明:

  • ref 属性:在模板中,使用 ref 属性为元素或组件指定一个引用名称。这个名称可以是任何有效的 JavaScript 标识符。
  • ref 函数:在 <script setup> 中,使用 ref 函数来创建一个响应式引用。初始值通常设置为 null,因为在组件挂载之前,引用的 DOM 元素尚不存在。
  • 访问引用:在 onMounted 生命周期钩子中,可以通过 myElement.value 访问到 DOM 元素或组件实例。

访问组件实例:

ref 也可以用于访问子组件的实例。假设有一个子组件 ChildComponent,可以这样使用 ref

<template><ChildComponent ref="child" /><button @click="callChildMethod">Call Child Method</button></template><script setup>import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const child = ref(null);const callChildMethod = () => {// 调用子组件的方法if (child.value) {child.value.someMethod();}
};
</script>

在这个示例中,child 引用指向 ChildComponent 的实例,可以通过 child.value 访问并调用子组件的方法。

注意事项

  1. 响应式ref 创建的引用是响应式的,但引用本身(如 myElement)并不是响应式的。需要通过 .value 来访问和修改引用的值。
  2. 生命周期:在组件的 mounted 钩子中,引用的 DOM 元素或组件实例才会被创建,因此在此之前访问它们会得到 null
  3. 类型检查:在 TypeScript 中,使用 ref 时可以指定类型,以便获得更好的类型检查和自动补全。

与defineExpose 的结合:

defineExpose 是 Vue 3 中在 <script setup> 中使用的一个函数,用于定义要暴露给父组件的属性和方法。通过这个函数,可以让父组件访问子组件的内部状态和行为

1. 创建子组件
<!-- 子组件:ChildComponent.vue -->
<template><div><h2>子组件</h2><p>Message: {{ message }}</p><button @click="increment ">我要被输出了</button></div>
</template><script setup>
import { ref, defineExpose } from 'vue';// 定义一个响应式变量
const message = ref('我是子组件!');// 定义一个方法
const increment = () => {message.value += '~';
};// 使用 defineExpose 暴露变量和方法
defineExpose({message,increment ,
});
</script><style scoped>
</style>

在上面的代码中,创建了一个子组件 ChildComponent,其中包含一个响应式变量 message 和一个 increment方法。通过 defineExpose,将这两个对象暴露给父组件。

2. 使用子组件
<!-- 父组件:ParentComponent.vue -->
<template><div><h1>父组件</h1><ChildComponent ref="child" /><button @click="showChildMessage">显示子组件信息</button><button @click="modifyChild">修改子组件信息</button></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const child = ref(null);// 获取子组件中的 message
const showChildMessage = () => {if (child.value) {alert(child.value.message); // 访问暴露的 message}
};// 调用子组件的 increment 方法
const modifyChild = () => {if (child.value) {child.value.increment (); // 调用暴露的 increment 方法}
};
</script><style scoped>
</style>

 在父组件中,使用 ref 属性获取子组件的实例。当用户点击“显示子组件信息”按钮时,父组件会弹出子组件中的 message 值;而点击“修改子组件信息”时,父组件会调用子组件的 increment 方法,将 message 更新。

总结

  • ref 属性用于在 Vue 3 中引用 DOM 元素或组件实例。
  • 通过 ref 函数创建响应式引用,并在组件的生命周期钩子中访问它们。
  • 可以用于直接操作 DOM 或调用子组件的方法。
  • defineExpose: 允许在子组件中定义要暴露的属性和方法,使得父组件可以访问这些内在状态。
  • 组合使用: 通过结合使用 ref 和 defineExpose,可以在一个组件中定义内部逻辑,并在父组件中进行灵活操作。

相关文章:

Vue - 标签中 ref 属性的使用

在 Vue 3 中&#xff0c;ref 属性用于在模板中引用 DOM 元素或组件实例。通过 ref&#xff0c;可以直接访问这些元素或组件的实例&#xff0c;从而进行更复杂的操作&#xff0c;比如获取元素的尺寸、调用组件的方法等。 基本语法&#xff1a; <template><div ref&qu…...

leetcode-不同路径问题

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 看见题目…...

MongoDB 数据库备份和恢复全攻略

在当今数据驱动的时代&#xff0c;数据库的稳定运行和数据安全至关重要。MongoDB 作为一款流行的 NoSQL 数据库&#xff0c;以其灵活的文档模型和高扩展性备受青睐。然而&#xff0c;无论数据库多么强大&#xff0c;数据丢失的风险始终存在&#xff0c;因此掌握 MongoDB 的备份…...

CentOS7使用源码安装PHP8教程整理

CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…...

Baklib助力内容中台实施的最佳实践与成功案例探索

内容概要 在当今数字化发展的背景下&#xff0c;内容中台的概念逐渐受到重视。内容中台不仅仅是一个技术平台&#xff0c;更是企业在内容管理和运营效率提升方面的重要助力。它通过整合内部资源&#xff0c;实现信息的集中管理与高效利用&#xff0c;帮助企业应对日益复杂的市…...

rocketmq-product-send方法源码分析

先看有哪些send方法 首先说红圈的 有3个红圈。归类成3种发送方式。假设前提条件&#xff0c;发送的topic&#xff0c;有3个broker&#xff0c;每个broker总共4个write队列&#xff0c;总共有12个队列。 普通发送。负载均衡12个队列。指定超时时间指定MessageQueue,发送&#…...

python flask中使用or查询和and查询,还有同时使用or、and的情况

在 Flask 中处理数据库查询时&#xff0c;通常会结合使用 ORM 工具&#xff0c;例如 SQLAlchemy。以下是 or 查询、and 查询以及两者同时使用的示例。 文章目录 基础准备1. 使用 or_ 查询2. 使用 and_ 查询3. 同时使用 or_ 和 and_4. 更加复杂的嵌套查询 基础准备 假设有一个…...

【第一天】零基础入门刷题Python-算法篇-数据结构与算法的介绍(持续更新)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.基本概念2.Python中的数据结构1. 列表&#xff08;List&#xff09;2. 元组&#xff08;Tuple&#xff09;3. 字典&#…...

租房管理系统实现智能化租赁提升用户体验与运营效率

内容概要 在当今快速发展的租赁市场中&#xff0c;租房管理系统的智能化转型显得尤为重要。它不仅帮助房东和租客之间建立更高效的沟通桥梁&#xff0c;还优化了整个租赁流程。通过智能化技术&#xff0c;这套系统能够自动处理资产管理、合同签署、财务管理等所有关键环节。这…...

python3+TensorFlow 2.x(四)反向传播

目录 反向传播算法 反向传播算法基本步骤&#xff1a; 反向中的参数变化 总结 反向传播算法 反向传播算法&#xff08;Backpropagation&#xff09;是训练人工神经网络时使用的一个重要算法&#xff0c;它是通过计算梯度并优化神经网络的权重来最小化误差。反向传播算法的核…...

Flutter 使用 flutter_inappwebview 加载 App 本地 HTML 文件

在 Flutter 开发中&#xff0c;加载本地 HTML 文件是一个常见的需求&#xff0c;尤其是在需要展示离线内容或自定义页面时。flutter_inappwebview 是一个功能强大的插件&#xff0c;支持加载本地文件和网络资源。本文将详细介绍如何使用 flutter_inappwebview 加载 App 本地 HT…...

Word常见问题:嵌入图片无法显示完整

场景&#xff1a;在Word中&#xff0c;嵌入式图片显示不全&#xff0c;一部分图片在文字下方。如&#xff1a; 问题原因&#xff1a;因段落行距导致 方法一 快捷方式 选中图片&#xff0c;通过"ctrl1"快捷调整为1倍行距 方法二 通过工具栏调整 选中图片&#xff0…...

为AI聊天工具添加一个知识系统 之68 详细设计 之9 三种中台和时间度量 之1

本文要点 要点 在维度0上 被分离出来 的业务中台 需求、技术中台要求、和数据中台请求 &#xff08;分别在时间层/空间层/时空层上 对应一个不同种类槽的容器&#xff0c;分别表示业务特征Feature[3]/技术方面Aspect[3]/数据流Fluent[3]&#xff09; 在维度1~3的运动过程中 从…...

On to OpenGL and 3D computer graphics

2. On to OpenGL and 3D computer graphics 声明&#xff1a;该代码来自&#xff1a;Computer Graphics Through OpenGL From Theory to Experiments&#xff0c;仅用作学习参考 2.1 First Program Square.cpp完整代码 /// // square.cpp // // OpenGL program to draw a squ…...

从曾国藩的经历看如何打破成长中的瓶颈

《曾国藩传》是一部充满智慧与人生哲理的传记&#xff0c;而曾国藩本人更是一个从“最笨”到“最智慧”的奇人。看他的成长与蜕变&#xff0c;不仅能感受到他如何超越自己的局限&#xff0c;也能从中获得关于人性、社会和历史的重要启示。曾国藩的一生让人深思&#xff0c;正是…...

JavaWeb学习-SpringBotWeb开发入门(HTTP协议)

(一)SpringBotWeb开发步骤 (1)创建springboot工程,并勾选开发相关依赖 (2)定义HelloController类,添加方法hello,并添加注解 (3)运行测试 (二)HTTP入门概述 创建请求页面 package com.itheima.demo3; /*请求处理类,加上注解标识为请求处理类*/import org.spr…...

数据库用户管理

数据库用户管理 1.创建用户 MySQL在安装是&#xff0c;会默认创建一个名位root的用户&#xff0c;该用户拥有超级权限&#xff0c;可以控制整个MySQL服务器。 在对MySQL的日常管理和操作中&#xff0c;通常创建一些具有适当权限的用户&#xff0c;尽可能的不用或少用root登录…...

BGP边界网关协议(Border Gateway Protocol)路由聚合详解

一、路由聚合 1、意义 在大规模的网络中&#xff0c;BGP路由表十分庞大&#xff0c;给设备造成了很大的负担&#xff0c;同时使发生路由振荡的几率也大大增加&#xff0c;影响网络的稳定性。 路由聚合是将多条路由合并的机制&#xff0c;它通过只向对等体发送聚合后的路由而…...

ASP.NET Core WebAPI的异步及返回值

目录 Action方法的异步 Action方法参数 捕捉URL占位符 捕捉QueryString的值 JSON报文体 其他方式 Action方法的异步 Action方法既可以同步也可以异步。异步Action方法的名字一般不需要以Async结尾。Web API中Action方法的返回值如果是普通数据类型&#xff0c;那么返回值…...

「 机器人 」仿生扑翼飞行器中的“被动旋转机制”概述

前言 在仿生扑翼飞行器的机翼设计中,模仿昆虫翼的被动旋转机制是一项关键技术。其核心思想在于:机翼旋转角度(攻角)并非完全通过主动伺服来控制,而是利用空气动力和惯性力的作用,自然地实现被动调节。以下对这种设计的背景、原理与优势进行详细说明。 1. 背景:昆虫的被动…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...