vue ref属性(标签属性)

最新推荐文章于 2025-05-29 11:43:12 发布
最新推荐文章于 2025-05-29 11:43:12 发布
阅读量8.8k 收藏 30
点赞数 22
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/118944900

要点：

之前 我们用原生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 653
前端学习八股文
【Vue3】标签的 ref 属性
又言又语
07-31 656
本文介绍 Vue3 中如何使用标签的ref属性。传统开发中通常使用获取标签对应的 DOM 元素，如果页面中多个 DOM 元素使用相同的 ID 进行标识，则使用可能获取非目标 DOM 元素。Vue 提供了标签的ref属性解决此问题。
vue之ref属性
铁甲小宝爱编程
11-24 233
ref属性 添加在html标签上 <p ref = "aaa" >内容<p> 可以通过vue自带属性 this.$ref.aaa 获取到完整的HTML标签内容 添加在子组件上 <components ref = "bbb"> <components> 可以通过vue自带属性 this.$ref.bbb 获取到子组件对象 ...
Vue中的ref属性学习笔记
最新发布
BruceLee的专栏
05-29 562
Vue2.x中，父组件拿到子组件的实例后，可以访问子组件中的任何数据，但是到了Vue3.x之后，通过ref标识的子组件，在父组件中即使获取到了子组件的实例，也不能顺利地拿到子组件中的数据，需要。，父组件不能随意获取子组件中的数据，而Vue2中则没有此限制，在Vue2中父组件一旦拿到子组件实例，就相当于获取到子组件全部。那么很有可能子组件写的原生的getElementById()方法获取到的却是第一个id标识的DOM，而。再次回到父组件，点击“测试”按钮，在控制台输出如下：（可以看到子组件暴露出来的数据）
vue组件（$refs对象，动态组件，插槽，自定义指令）
2301_79568779的博客
09-20 1303
组件，专门用来实现组件的动态渲染。a.是组件的占位符b.通过is属性动态指定要渲染的组件名称c.
Vue基础（一）ref,component,keepalive,solt，transtion，过滤器filter
weixin_50760181的博客
04-11 812
认识ref ref在标签中绑定可以获取标签信息；绑定在子组件中可以获取子组件的整个子组件，可以查看或改变子组件的元素 <template> <div> <Chird ref='childcom' ></Child> </div> </template> <script> export default{ data(){}, methods:{ ChangeClild(){ th
Vue之componet之$ref(028)
weixin_31707323的博客
04-29 625
Vue之componet之$ref 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet-children</title> </head> <body> <div id="app">
vue3_03_简单介绍标签的ref属性
浪漫韫秋
05-02 1042
ref的本质就是打标记的，就是为了规避id的这种错误的东西的；可以加载在普通的html标签身上，拿到的是dom元素的；也是可以加载在组件标签当中的，拿到的就是实例对象的；
Vue3【十五】标签的Ref属性
Ggome的博客
06-10 1207
标签的ref属性 用于注册模板引用用在dom标签上，获取的是dom节点用在组件上，获取的是组件实例对象。
Vue组件：模板引用ref属性的使用
pan_junbiao的博客
09-13 799
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性。挂载结束后引用都会被加载在 this.$refs 之上。
Vue的ref属性、props属性、mixin混合、定义plugin插件
Bulut0907
09-02 856
name:'App'
【VUE基础】VUE3第五节—核心语法之ref标签、props
TT小子的博客
07-05 438
在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。需要使用defineExpose将组件中的数据交给外部，就可以获取到name，age值。在父组件中设置ref标签，获取到的是子组件对象，还没有获取到真正数据。以上代码并没有获取到Person.vue中具体的name，age值。如果你正在搭配 TypeScript 使用。用在组件标签上，获取的是组件实例对象。作用：用于注册模板引用。
vue的ref的基本使用，组件使用与操作
weixin_49088708的博客
06-27 2477
ref的使用
Vue 组件 ref属性
Tao.的博客
10-30 1440
计算属性 监听属性 父子通信 ref keep-alive 插槽
Vue 11-组件使用ref属性
Lin16819的博客
09-18 347
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
vue中使用ref
秋来九月八
01-05 650
直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。这使得父组件可以与子组件进行通信，调用子组件的方法或访问子组件的数据。父组件如何获取子组件中某个子组件的全部参数和方法？// 父组件调用子组件中的showPhone方法。// 父组件调用子组件中的showPhone方法。
Vue组件开发--ref引用、动态组件、组件缓存、异步组件、组件混入
qq_44749491的博客
10-04 3446
非组合式API中的组件使用
关于在vue3中的动态组件component标签上给ref属性动态赋值的问题
I_Allen_Liu的博客
03-05 643
之前的错误写法，本人前端经验不足，拿着老旧的思维逻辑拼凑，这种情况下在本地运行环境是可以实现点击下一步进行切换的，但打包压缩发布到线上之后，就失效了。前言：此问题困扰我已久，每次都是本地运行没问题，但发布到线上之后就获取不到动态组件的ref对象。
Vue.js之$refs
猫老板的豆
11-16 2822
尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID，使父组件能通过 ref 直接访问子组件中的数据通过 this.$refs.outsideComponentRef 能直接定位到 ref=”outsideComponentRef” 的上，并返回它例化对象一、ref使用在外面的组件上
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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值