vue ref属性(标签属性)

最新推荐文章于 2024-08-23 18:57:26 发布
最新推荐文章于 2024-08-23 18:57:26 发布
阅读量8.4k 收藏 24
点赞数 14
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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属性
LuckyStar的博客
07-14 91
【代码】Vue的ref属性。
Vue篇(010)-vue3如何通过ref属性获取元素
手掌日月摘星辰
07-28 1926
参考答案：1.在template中的写法跟vue2一样，给元素添加个ref=‘xxx’ 2.在setup中，先创建一个响应式数据，并且要把响应式数据暴露出去 3.当元素被创建出来的时候，就会给对应的响应数据赋值 4.当响应式数据被赋值之后，就可以利用生命周期方法onMounted中获取对应的响应式数据，即DOM元素解析...
关于Vue脚手架ref属性，props配置，mixin混入，以及插件plugins的简单使用
m0_64081601的博客
03-19 1088
被用来给元素(html元素，例如span)或子组件注册引用信息（子组件在父级组件中使用）（id的替代者）应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc)定义插件：对象.install = function(Vue,options){-- 1.添加全局过滤器 -->-- 2.添加全局指令 -->-- 3.配置全局混入（合） -->-- 4.添加实例方法 -->使用插件：Vue.use()在Vue中合理的运用插件，让代码变得更强大。
vue3标签中的ref属性&如何使用$refs获取元素
最新发布
m0_73814236的博客
08-23 1658
getCurrentInstance()：获取当前组件实例。defineExpose作用：向外暴露属性。
vue的ref的基本使用，组件使用与操作
weixin_49088708的博客
06-27 2363
ref的使用
vue之ref属性
铁甲小宝爱编程
11-24 189
ref属性 添加在html标签上 <p ref = "aaa" >内容<p> 可以通过vue自带属性 this.$ref.aaa 获取到完整的HTML标签内容 添加在子组件上 <components ref = "bbb"> <components> 可以通过vue自带属性 this.$ref.bbb 获取到子组件对象 ...
Vue之componet之$ref(028)
weixin_31707323的博客
04-29 586
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">
Vue基础（一）ref,component,keepalive,solt，transtion，过滤器filter
weixin_50760181的博客
04-11 756
认识ref ref在标签中绑定可以获取标签信息；绑定在子组件中可以获取子组件的整个子组件，可以查看或改变子组件的元素 <template> <div> <Chird ref='childcom' ></Child> </div> </template> <script> export default{ data(){}, methods:{ ChangeClild(){ th
vue中使用ref
秋来九月八
01-05 590
直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。这使得父组件可以与子组件进行通信，调用子组件的方法或访问子组件的数据。父组件如何获取子组件中某个子组件的全部参数和方法？// 父组件调用子组件中的showPhone方法。// 父组件调用子组件中的showPhone方法。
【8.0】Vue之ref属性
Chimengmeng的博客
08-06 312
【ref属性】 ref属性，vue提供的，写在标签上 可以写在普通标签：在vue中使用 this.$refs.名字 拿到dom对象，可以原生操作 可以写在组件上:在vue中使用 this.$refs.名字 拿到[组件]对象，组件属性，方法直接使用即可 【详解】 ref属性是Vue.js中提供的一种特殊属性，它可以用于在标签上进行设置。 ref属性可以被用在普通HTML标签上，也可以...
vue中v-for循环给标签属性赋值的方法
10-17
在正常情况下，如果直接将数据属性放入标签属性中，其值会被当作字符串处理，这并不是我们想要的结果。例如，我们希望给按钮设置不同的样式类名或图标，需要在类名或属性名前加上v-bind或":"来让Vue能够识别并正确...
Vue-test:02_src_ref属性
呵呵哒!的博客
07-13 220
Vue-test:02_src_ref属性
前端面试八股文-Vue组件的定义和注册切换，通过 ref 属性获取DOM元素，发表评论功能的实现，使用components定义私有组件，全局组件，模块化和组件化Vue组件之间的传值。
VAN
11-04 604
前端学习八股文
Vue组件开发--ref引用、动态组件、组件缓存、异步组件、组件混入
qq_44749491的博客
10-04 3227
非组合式API中的组件使用
Vue.js之$refs
猫老板的豆
11-16 2789
尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID，使父组件能通过 ref 直接访问子组件中的数据通过 this.$refs.outsideComponentRef 能直接定位到 ref=”outsideComponentRef” 的上，并返回它例化对象一、ref使用在外面的组件上
vue动态添加title属性文本
weixin_49696014的博客
01-26 1066
1、首先在router/index.js中的路由规则里，给每一个路由，添加meta属性 {path: '/AllUserinfo', meta:{ title: '个人信息', }, component: AllUserinfo }, {path: '/roster', meta:{ title: '花名册', }, component: roster, }, 2、在入口文件中，写入： // 动态添加title文本 router.befo
Vue中的ref属性
路人的博客
08-24 1817
被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）使用方式：打标识：或获取：this.$refs.xxx。
VUE如何通过$refs添加属性
热门推荐
qq_40239859的博客
06-21 1万+
html部分就不放了，直接放js部分，如下面代码所示。注意！！！animated前端的空格一定不能少。 this.$refs[i][0].setAttribute("class", " animated bounceInLeft")
vue中ref的用法
qq_41687299的博客
01-30 1489
1、ref加在普通元素上，用this.$refs.refName获取dom元素 //定义的myComponent.vue <button @click="clickF">边界值练习</button> <input type="text" ref="input" :value="value" @focus="myfocus...
在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` 组件的某个方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值