vue ref属性(标签属性)

最新推荐文章于 2025-10-09 22:03:17 发布
原创 最新推荐文章于 2025-10-09 22:03:17 发布 · 8.9k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了Vue中ref和id的区别。在原生JS中，id用于DOM操作，而在Vue中，ref提供了一种更便捷的方式来引用组件或元素。通过ref，可以直接获取组件实例，而不仅仅是DOM元素。当在组件上使用ref时，会得到该组件的实例对象，这对于组件间的通信至关重要。相比之下，id会附加到组件最外层的根元素上，导致获取的是整个组件的DOM结构。总结来说，ref适合于获取组件实例，而id则用于标识DOM元素。

要点：

之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作

vue中用ref

 并且可以在component上找到

这边this指向的就是app组件,

 

显示,其实ref就是id的代替者,只不过不需要再写dom元素操作了

 

其实就是你在哪个标签上加ref,就vue component 帮你收集哪个元素

比如这边在h1和btn上加了ref则在vue component的$ref中,收集了,title和btn元素

注意： 如果在一个组件上加上ref?会收集什么元素？

发现输出的就是那个App的子组件School组件的new component、

也就是说sc是School组件的实例对象

输出一波app的Vue Component

发现sch为School的实例对象

 

id与ref的差别

如果没有组件的话,确实id和ref没有区别

但是在组件上这两个就有区别了

验证：

把组件上ref换成id,用于dom操作输出

发现输出的是school组件中完整的结构

 

为什么：

因为是给School组件标签加的id,之后就会跑到School组件最外侧的根元素上,也就是School组件的div上

 

 所以才会发现div上多了个id

 

 对比组件的id和ref

获取id的话,得到的就是一个组件的完整dom

 

获取ref的话,得到的是组件的实例对象,当在组件间通信里，组件的实例对象非常重要

 

 

总结：

前端面试八股文-Vue组件的定义和注册切换，通过 ref 属性获取DOM元素，发表评论功能的实现，使用components定义私有组件，全局组件，模块化和组件化Vue组件之间的传值。
VAN
11-04 675
前端学习八股文
Vue的ref属性
LuckyStar的博客
07-14 253
【代码】Vue的ref属性。
vue知识-ref属性
2301_79949966的博客
07-19 384
vue知识-ref属性
【Vue】——生命周期、ref属性、hooks
最新发布
2301_78540522的博客
10-09 1132
在 Vue + TS 开发中，清晰的定义类型是类型安全的基础。定义对象的形状，主要用于定义Props、响应式数据、发射事件的结构。export:抛出import：引入@是跟文件路径自定义类型// 定义一个用户对象的结构id: number;email?: string;// 可选属性// 用于 Propsuser: User;// 用于响应式数据提高代码的复用性和类型安全性。Vue 的许多函数都是泛型函数。// 用泛型指定 ref 的内部值类型。
7、IC验证面试88问——ref类型、component和object、UVM树形结构、验证环境组成
weixin_45925102的博客
02-17 1092
ref类型、component和object、UVM树形结构、验证环境组成
vue中ref的使用
热门推荐
qq_52372296的博客
04-01 7万+
ref是vue中DOM元素和组件标签中的属性
vue之ref属性
铁甲小宝爱编程
11-24 247
ref属性 添加在html标签上 <p ref = "aaa" >内容<p> 可以通过vue自带属性 this.$ref.aaa 获取到完整的HTML标签内容 添加在子组件上 <components ref = "bbb"> <components> 可以通过vue自带属性 this.$ref.bbb 获取到子组件对象 ...
【Vue3】标签的 ref 属性
又言又语
07-31 752
本文介绍 Vue3 中如何使用标签的ref属性。传统开发中通常使用获取标签对应的 DOM 元素，如果页面中多个 DOM 元素使用相同的 ID 进行标识，则使用可能获取非目标 DOM 元素。Vue 提供了标签的ref属性解决此问题。
vue3_03_简单介绍标签的ref属性
浪漫韫秋
05-02 1119
ref的本质就是打标记的，就是为了规避id的这种错误的东西的；可以加载在普通的html标签身上，拿到的是dom元素的；也是可以加载在组件标签当中的，拿到的就是实例对象的；
Vue组件：模板引用ref属性的使用
pan_junbiao的博客
09-13 886
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性。挂载结束后引用都会被加载在 this.$refs 之上。
Vue的ref属性、props属性、mixin混合、定义plugin插件
Bulut0907
09-02 940
name:'App'
vue组件（$refs对象，动态组件，插槽，自定义指令）
2301_79568779的博客
09-20 1438
组件，专门用来实现组件的动态渲染。a.是组件的占位符b.通过is属性动态指定要渲染的组件名称c.
vue中的ref
A_bet_of_three_years的博客
10-23 1106
ref
vue中的ref和$refs
weixin_34202952的博客
11-22 307
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。普通的DOM元素上使用 <div id="app7"> <input type="text"ref="TEXT"/ > <button @clic...
vue中ref的作用
u011849297的博客
01-29 543
vue中的ref其实功能很强大，下面介绍一下如何使用。 基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> <script> export defau
vue的ref
顺其自然~专栏
07-10 269
Vue3中的ref是一个用于创建响应式引用的API，它是Vue 3引入的Composition API的一部分。ref的作用是包装一个基本类型数据或一个对象，使得该数据或对象的改变能触发视图的更新。需要在页面变化的数据做成响应式的。
Vue中的ref属性
RayShyy的博客
11-02 4693
大家在使用原生JS对DOM进行操作时肯定第一步是需要获取DOM元素的，比如通过id获取document.getElementById(“idName")，或者使用jQuery获取 jQuery对象$("#idName”)，vue对此也实现了比较方便的获取操作DOM的用法 — ref属性。在子组件中使用ref属性，通过this.$refs.refName获取的是组件的实例对象也就是子组件本身。在普通DOM元素中使用ref属性，通过this.$refs.refName获取的是DOM元素。
Vue基础（一）ref,component,keepalive,solt，transtion，过滤器filter
weixin_50760181的博客
04-11 834
认识ref ref在标签中绑定可以获取标签信息；绑定在子组件中可以获取子组件的整个子组件，可以查看或改变子组件的元素 <template> <div> <Chird ref='childcom' ></Child> </div> </template> <script> export default{ data(){}, methods:{ ChangeClild(){ th
vue3中标签的ref属性
04-01
### Vue 3 中 `ref` 属性的使用方法 #### 基本概念 在 Vue 3 中，`ref` 是一种特殊的属性，可以用来注册对 DOM 元素或子组件实例的引用。它允许开发者直接操作这些元素或实例，在某些场景下非常有用。 #### 创建和访问 Ref 对象 通过 `ref()` 函数可以创建一个 ref 对象，该对象包含一个名为 `value` 的属性，其值即为目标 DOM 元素或组件实例[^2]。当需要访问目标时，可通过 `.value` 获取实际的内容。 #### 示例代码 以下是几个典型的例子展示如何在 Vue 3 中使用 `ref`： ##### 操作 DOM 元素 下面是一个简单的案例，展示了如何通过 `ref` 访问并操作 DOM 元素： ```html <template> <div ref="myDiv">Hello, Vue3!</div> </template> <script setup> import { ref, onMounted } from 'vue'; const myDiv = ref(null); onMounted(() => { console.log(myDiv.value); // 输出：<div>Hello, Vue3!</div> }); </script> ``` 在这个例子中，定义了一个 `ref` 变量 `myDiv` 并将其绑定到 `<div>` 上。一旦组件挂载完成，就可以通过 `myDiv.value` 来获取对应的 DOM 元素。 --- ##### 调用子组件的方法 除了操作 DOM 元素外，`ref` 还能用于调用子组件中的方法。以下是如何实现这一功能的例子： ```html <!-- 子组件 --> <template> <div>{{ msg }}</div> </template> <script> export default { data() { return { msg: "初始消息" }; }, methods: { changeMsg(newMsg) { this.msg = newMsg; } } }; </script> ``` ```html <!-- 父组件 --> <template> <button @click="handleClick">修改子组件的消息</button> <child-component ref="child"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleClick() { this.$refs.child.changeMsg('新消息'); // 调用了子组件的方法 } } }; </script> ``` 在此示例中，父组件通过 `$refs.child` 访问到了子组件实例，并成功调用了它的 `changeMsg` 方法[^3]。 --- ##### Reactivity 和 Ref 结合 如果希望让某个变量具有响应式特性，则可以直接利用 `ref` 定义的数据结构。例如： ```javascript import { ref } from 'vue'; const count = ref(0); console.log(count.value); // 初始值为 0 count.value++; console.log(count.value); // 更新后的值为 1 ``` 这里说明了即使是在普通的 JavaScript 数据上应用 `ref`，也可以获得响应式的更新机制。 --- ### 注意事项 虽然 `ref` 提供了一种便捷的方式来处理非响应式的需求（比如手动 DOM 操控），但在大多数情况下应优先考虑基于数据驱动的设计模式，减少直接依赖于 DOM 的逻辑。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值