vue 中ref 的使用注意事项

最新推荐文章于 2022-04-25 18:23:19 发布
最新推荐文章于 2022-04-25 18:23:19 发布
阅读量642 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/daiwenru/p/7910363.html
版权

最近看别人的项目发现有些语法不能理解，所以百度进行了学习。现在总结一下。

ref 有两种用法

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3.如何利用v-for 和ref 获取一组数组或者dom 节点

 

转载于:https://www.cnblogs.com/daiwenru/p/7910363.html

weixin_30782331
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue知识 的ref使用
qq_28395503的博客
10-20 544
vue小知识点ref 的使用 ref 的使用 ref是绑定在标签中，操作dom的 例子： <div class="nav_right" ref="city" v-on:click='changeCityFun'>清远</div> methods:{ changeCityFun(){ var kk = this.$ref...
Vue 2中ref属性的使用方法及注意事项
08-30
以下是对Vue 2中`ref`属性的详细解释和注意事项。 1. **定义和使用**： - 在模板中，我们可以为任何Vue实例或组件添加`ref`属性。例如，`<input ref="myInput">`将创建一个名为`myInput`的引用，指向该输入元素。 ...
vue中一个关于ref的易错点
qq_44937699的博客
11-09 446
改bug改了两天，主要是把时间花在找bug上了，解决之后感觉这似乎是一个很小的问题，所以记录一下，巩固一下吧。 出错代码段： <template> <WangEditor ref="md" :content="content" /> <Button @click="save()">保存</Button> </template> <script> data(){ content:'' }, methods:{ save(
如果不用引用vue，那么用ref可以，不用不行，似乎，为什么呢？
weixin_40945354的博客
07-01 284
这样不行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite A
ref、refs使用的注意事项
weixin_30757793的博客
07-15 322
ref是被用来给元素或子组件注册引用信息。引用信息将注册在父组件的 $refs 对象身上。如果在普通的DOM元素身上使用，引用指向就是DOM元素；如果用在子组件身上，引用就是指向组件实例。 当v-for用于元素或组件身上时，引用循序就是将包含DOM节点或组件实例的数组。 关于ref注册时间的重要说明：因为ref本身就是作为渲染结果被创建的，在初始渲染的时候不能被范文-他们还不存在! $ref也...
Vue中ref属性使用的注意事项
qq_41709082的博客
01-01 7151
Vue中ref属性使用的注意事项 1.在vue中为HTML标签设置ref属性，主要是为了一些需要进行操作DOM才能完成的功能而设置的。 2.ref属性相当于给标签设置了一个ID，可以使用该特殊标识来进行一些DOM的操作，但是使用的时候有如下几个注意事项： ref属性值绑定元素都是唯一的，如果一个ref属性绑定了多个dom节点，那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。 ...
vue中的ref使用
06-25
`ref`通常在Vue实例的生命周期钩子函数（如`mounted`）或者在方法中使用，因为这些时刻`$refs`已经被初始化。在计算属性或侦听器中直接使用`$refs`可能会导致未定义的错误，因为这些属性和侦听器在渲染之前可能就...
vue获取dom元素注意事项
08-28
vue获取DOM元素注意事项 vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？ 首先，我们需要了解vue的...
浅谈vue中resetFields()使用注意事项
11-19
问题二：在弹框关闭方法中使用`resetFields()` 在`@close`事件中调用`resetFields()`，有时候会发现上一次的错误提示仍然存在，这意味着表单字段并未真正重置。这是因为`resetFields()`是基于表单当前的值进行重置，...
vue中ref的使用
qq_52372296的博客
04-01 7万+
ref是vue中DOM元素和组件标签中的属性
Vue中ref和$refs的介绍与使用
chenzimin_blog
04-25 3416
之前没怎么注意 ref 的使用。后来一次结合 for 循环使用。才发现 ref 的使用细节满满。于是就总结了一下。 ref作用 用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。 1、如果给普通的dom元素使用，引用指向的是dom元素。 2、如果是给子组件使用，引用指向的是子组件的实例。 注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。 2、微信小程序中给dom元素使用ref无效。得到的是 空对象
vue中使用ref引用子组件方法报错的问题
chenlim87的博客
03-25 7201
项目中，父组件使用了 ref 属性调用子组件的方法突然报错了，代码和报错如下： 解决方法：把 mounted 里的调用放到一个定时器里就可以了 我的理解是因为 ref 属性初始渲染时，子组件还没挂载好，所以这个方法还不存在，所以不能访问。加个定时器延时执行。但是其他使用 ref 属性调用的方法又没有报错，百思不得其解。知道的可以回答下。 setTimeout(() =&g...
踩坑Vue中的 ref 和 $refs
Freya_yyy的博客
12-26 591
转载整合于https://blog.csdn.net/FireBird_one/article/details/79958733和https://blog.csdn.net/sinat_17775997/article/details/73932246       如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM ...
vue中的 ref 和 $refs
很多时候犯错都是在不知情的情况下发生的
07-04 565
如图，ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.input1)//<input type="text" id="input1"> console.log(document.getElem...
Vue中ref和$refs的介绍及使用
越努力，越幸运！
03-29 5万+
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 D...
vue 第一次获取ref失败
renchaoqiong
03-21 2708
问题：在很多情况下，第一次获取ref会失败，但是第二次会成功。 在element-ui中弹框中的表格中绑定了ref ，点击按钮开启弹框并且获取ref这个时候就会失败代码如下： image.png 失败原因：弹框开启时DOM还没有完全加载完成，所以会导致第一次获取不到ref 解决方法： 第一种（推荐） this.$nextTick(()=>{ ......
Vue3中遇到 Ref＜boolean＞无法赋值给 ＜boolean＞类型的问题
haliboti的博客
12-07 1万+
Ref boolean无法赋值给 Boolean类型的问题 再项目生产的过程中，遇到Ref<boolean>不能赋值给<boolean>类型的报错。 解决方法： const res = ref(true) // 赋值的时候需要用 res.value const temp:boolean = res.value 还是vue3和ts的使用不够熟练
【Vue】ref 的作用以及在实际项目中的应用
Owen的博客
11-10 684
前言：之前做项目的时候，会一直碰到 ref，但没有是用和深入了解过，今天来看看 ref 究竟有什么作用。 一、文档说明 注意：这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。 二、在实际项目中的应用 情况1、ref加在html元素上 情况2、ref加在组件上 情况3、ref在 v-for 中使用 ...
Vue与ref属性与refs
热门推荐
前端技术的学习整理
05-25 17万+
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册实例：这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来...
vue3中使用provide
最新发布
08-26
在Vue3中，我们可以使用`provide`和`inject`来实现爷孙组件之间的值传递。首先，在爷爷组件中使用`provide`方法提供要传递的值，例如`provide('rowId', rowId)`，其中`'rowId'`是提供的键名，`rowId`是要传递的值。这里的`rowId`可以是一个响应式对象，可以使用`ref`或`reactive`进行定义。 然后，在孙子组件中使用`inject`方法来获取爷爷组件提供的值，例如`let car = inject('car')`，其中`'car'`是要获取的键名。此时，`car`将获取到爷爷组件提供的值，并且是响应式的，可以直接在模板中使用。 需要注意的是，`provide`方法需要写在`setup`函数中，否则会有警告提示。同时，`provide`是异步的，所以不用担心注入一个空值的问题。另外，`provide('rowId', rowId)`中的`rowId`必须是一个响应式的对象，而不是其值，否则在使用`inject`获取值时无法取到正确的值。 以上是对Vue3中使用`provide`和`inject`进行爷孙组件传值的用法和注意事项的说明。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue3之provide的使用](https://blog.csdn.net/ssssummer/article/details/129955202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue3中的provide](https://blog.csdn.net/ice_stone_kai/article/details/131672067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值