Vue3：标签的ref属性用法

生产队队长

已于 2024-03-17 15:58:00 修改

阅读量693

点赞数 4

分类专栏：前端文章标签： vue.js

于 2024-03-17 15:56:27 首次发布

本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/136782973

版权

前端专栏收录该内容

96 篇文章 2 订阅

订阅专栏

一、情景说明

我们在写前端页面的时候，肯定会遇到获取DOM内容的情况。
以往，我们是用原生的js方法去获取，如document.getXxxx
但是，这中方法会有个问题，如果父组件和子组件的id相同，则会出错。

在Vue3中，我们使用ref来获取DOM内容
从而避免这个问题
同时，可以用ref获取组件实例

二、案例

1、用在原生DOM上

标记

<h2 ref="title2">北京</h2>

获取

	import {ref,defineExpose} from 'vue'

    // 创建一个title2，用于存储ref标记的内容
    let title2 = ref()

暴露变量

defineExpose({title2})	//多个用逗号隔开

2、用在组件标签上

标记

<Person ref="ren"/>

获取

let ren = ref()

ren变量结构，子组件暴露的变量title2位置
在这里插入图片描述

三、总结

用在普通DOM标签上，获取的是DOM节点。
用在组件标签上，获取的是组件实例对象。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

生产队队长

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue3：标签的ref属性用法

Vue
复制链接

扫一扫

专栏目录

vue.js中ref和$refs的使用及示例讲解

10-16

主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

vue3-demo:vue3学习演示

04-09

在这个“vue3-demo”项目中，我们可以深入理解Vue3的核心概念和用法。下面将详细讲解Vue3的一些关键知识点。 1. **Composition API**： Vue3 引入了Composition API，这是一种更加模块化和灵活的方式来组织组件...

参与评论您还未登录，请先登录后发表或查看评论

Vue3入门到实战笔记03--标签的ref属性/ props

jxncxgx的专栏

02-04

426

/ 定义一个接口，限制每个Person对象的格式。用在组件标签上，获取的是组件实例对象。作用：用于注册模板引用。

Vue3实战笔记（44）—vue3组件的ref属性

最新发布

山花的博客

05-26

689

之前学习过ref声明响应式对象，前几天读代码遇到了发懵的地方，详细学习了一下才发现，用法还有很多，遂总结一下ref的用法备忘。Vue3 中的 ref 是一种创建响应式引用的方式，它在Vue生态系统中扮演着重要角色。以下是Vue3中ref属性及其相关API的几个关键点：创建响应式变量：使用 ref 函数可以创建一个响应式的数据引用，返回的对象包含 .value 属性，该属性既可以读取也可以写入，并且是响应式的。Javascript2// 创建一个响应式引用，初始值为0// 输出0。

Vue3---基础6（标签的ref属性）

Anorry的博客

04-12

464

关于标签的ref属性，讲述了在普通DOM 和组件标签上绑定 ref 的区别等

Vue3学习——标签的ref属性

m0_49494051的博客

02-20

577

【代码】Vue3学习——标签的ref属性。

vue3中标签的ref属性

libingjiedd的博客

05-06

2185

通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与。进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用。：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$，引用指向的就是DOM 元素如果用在子组件上，引用就指向组件实例。refs.fruit 的值应该是一个数组，数组中放的DOM元素。refs.fruit 的值应该是一个数组，数组中放的DOM元素。

Vue3快速上手（十一）标签里的ref属性

一掬净土

02-27

1177

标签里的ref，可以在普通html元素标签上，也可以用在vue组件标签上。用在html元素标签上时，返回的是该html元素的DOM；用在vue组件标签上时，返回的是该子组件（也就是当前vue是父组件）暴露给父组件的对象，暴露哪些，在返回的对象里就包含哪些，不暴露不包含。

Vue3中自定义Ref的使用

xllllll___的博客

04-01

2603

在Vue3中，ref()接受一个内部值，它返回的是一个ref对象，这个对象是响应式的，可以更改的，且只有一个指向其内部属性值的属性value。ref()将传入参数的值包装为一个带value属性的ref对象。

vue3 ref属性

greed

09-10

3291

vue3 ref属性操作单个DOM元素操作单个DOM或者组件的流程定义一个响应式变量把变量返回给模板使用模板中绑定上述返回的数据可以通过info变量操作DOM或者组件实例 <template> <div> <div>ref操作DOM和组件</div> <hr>  <div ref='info'>hello</div&g

Vue3中 ref 属性详解

热门推荐

明天也要努力的博客

07-09

4万+

总结：在 Vue3 中没有 $refs，因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的方式来获取。Vue3 需要借助生命周期方法，因为在 setup 执行时，template 中的元素还没挂载到页面上，所以必须在 mounted 之后才能获取到元素。总结：先申明 ref 响应式数据，再返回给模版使用，模板中通过 ref 绑定数据；总结：先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数中可以通过参数得到单个元素，这个元素一般可以放

在vue3+ts+setup语法糖中使用图片预览组件

09-14

接下来，为了在Vue3中实现图片预览，我们可以使用现有的图片预览库，如`vue-preview`。首先，确保你已经安装了Vue3兼容的版本，可以通过以下命令进行安装： ```bash npm install vue-preview@next --save # 或者...

vue 清空input标签中file的值操作

11-20

这里，我们创建了一个`<input type="file">`标签，并添加了`ref="pathClear"`属性以便于在Vue组件的方法中引用它。同时，`@change="onUpload"`监听文件选择事件，当用户选择文件时会触发`onUpload`方法。在Vue组件...

vue中动态添加class类名的方法

10-18

下面将详细讲解在Vue中动态添加class类名的几种常见方法。 ### 1. 对象形式 Vue允许我们使用一个JavaScript对象来动态地为元素添加或移除class。在这个对象中，键是类名，值是布尔值。如果值为`true`，则添加对应...

【Vue3】深入理解Vue中的ref属性

null18的博客

03-01

2715

ref是Vue提供的一个特殊属性，用来在模板或组件中给子元素或组件注册引用信息。这个引用信息可以是一个指向DOM元素或组件实例的引用，通过这个引用，我们可以直接操作对应的DOM元素或组件实例总结一下* 用在普通DOM标签上，获取的是DOM节点。用在组件标签上，获取的是组件实例对象。挑战与创造都是很痛苦的，但是很充实。

VUE2语法-$refs和ref属性的使用

雾林小妖的博客

11-22

1万+

VUE中使用ref修饰标签，通过$refs获取标签的相关信息。

Vue3-ref的用法总结

LM0916的博客

05-19

336

比如：项目中子组件是一个弹窗或者抽屉，通过defineExpose暴露出来可控制它的显示隐藏的变量a,那么父组件在使用这个抽屉或者弹窗的时候，是可以通过在这子个组件上绑定ref = “dialogRef”,然后就可以得到子组件的组件实例对象，上面就有defineExpose的属性，那父组件不是想怎么么用就怎么用了吗？有的时候配合defineExpose（vue3新增的一个api，将子组件的方法或者属性暴露出来，供父组件使用）这样父组件在使用子组件时，通过ref是可以拿到子组件暴露出来的变量和方法的。

vue3中获取ref元素的几种方式总结

时清云的博客

07-05

1万+

最近开发了一个PC端的新项目，其中有一个这样的需求，点击表单中已上传的图片（这一栏中可以上传多张图片），进行预览时，会出现一个轮播图的效果，显示当前点击的图片，点击左右滑动，可以预览上一张或者下一张。因为要实现点击哪一张，就显示哪一张的效果，所以在轮播图中需要给它设置当前的图片的name，这样才会展示当前图片，这个时候就用到了ref来获取轮播图的元素。

在vue3中ref标签属性使用

06-11

在 Vue 3 中，`ref` 是一个新的响应式 API，用于在模板中引用一个元素或组件，并可以在 JavaScript 代码中访问该元素或组件的属性和方法。在模板中，可以使用 `ref` 指令来创建一个 `ref` 对象，并将其绑定到一个元素或组件上。例如： ```html <template> <div> <input type="text" ref="inputRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const inputRef = ref(null); function handleClick() { inputRef.value.focus(); } return { inputRef, handleClick, }; }, }; </script> ``` 在这个例子中，我们使用 `ref` 指令将 `input` 元素绑定到 `inputRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `inputRef.value`，并调用了 `focus` 方法，以便将焦点设置到 `input` 元素上。需要注意的是，在 Vue 3 中，`ref` 不再返回一个对象，而是返回一个包含 `value` 属性的普通 JavaScript 对象。因此，在访问 `ref` 对象的属性和方法时，需要使用 `.value` 来访问其值。另外，在 Vue 3 中，`ref` 还可以用于引用组件，例如： ```html <template> <div> <MyComponent ref="myComponentRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, setup() { const myComponentRef = ref(null); function handleClick() { myComponentRef.value.someMethod(); } return { myComponentRef, handleClick, }; }, }; </script> ``` 在这个例子中，我们使用 `ref` 指令将 `MyComponent` 组件绑定到 `myComponentRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `myComponentRef.value`，并调用了 `someMethod` 方法，以便调用 `MyComponent` 组件的某个方法。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交