this.$refs获取不到dom的可能原因及方法解决

客官°小女子只卖身不卖艺 2023-10-09 14:54 15阅读 0赞

## 背景 ##

页面一进来初始化之后，需要通过获取this.$refs 调用子组件中的某个方法，但是获取不到，返回undefind

### 这是我遇到的错误情况 ###

![c7ec239ccbb0450592d355930282ddf2.png][]

![07d97c341c0942aba88067be6c1cf754.png][]

### 正确的情况是这样 ###

![431f312c3a684b69b456f103c3fcf4a3.png][]

![617e2c1d3d3845faaf864e8a41b3fdbb.png][]

## 搜索查询原因 ##

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 **mounted()\{\} 钩子中调用，或者在 this.$nextTick(()=>\{\}) 中调用。**  
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

**根据这个方法测试还是不行**

## **解决方法** ##

==在异步方法里面调用 this.$nextTick(()=>\{\}) ==

mounted() {
    			setTimeout(() => {
    				this.$nextTick(() => {
    					this.$refs['tabbar1'].initTabbaer()
    				})
    			}, 100);
    		},

[c7ec239ccbb0450592d355930282ddf2.png]: https://img-blog.csdnimg.cn/c7ec239ccbb0450592d355930282ddf2.png
[07d97c341c0942aba88067be6c1cf754.png]: https://img-blog.csdnimg.cn/07d97c341c0942aba88067be6c1cf754.png
[431f312c3a684b69b456f103c3fcf4a3.png]: https://img-blog.csdnimg.cn/431f312c3a684b69b456f103c3fcf4a3.png
[617e2c1d3d3845faaf864e8a41b3fdbb.png]: https://img-blog.csdnimg.cn/617e2c1d3d3845faaf864e8a41b3fdbb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL数据不一致：原因分析及解决方法

MySQL数据不一致通常是由于多种原因导致的，以下是一些常见的原因和解决方法： 1. 数据库并发问题： - 解决：使用数据库事务来确保在多条SQL语句执行时的一致性。

旧城等待，/ 2024年12月14日 04:27/ 0 赞/ 32 阅读

相关 this.$refs获取不到dom的可能原因及方法解决

背景页面一进来初始化之后，需要通过获取this.$refs 调用子组件中的某个方法，但是获取不到，返回undefind 这是我遇到的错误情况 ![c7ec239

客官°小女子只卖身不卖艺/ 2023年10月09日 14:54/ 0 赞/ 16 阅读

相关出现java.lang.NullPointerException的可能原因及解决方案

出现 java.lang.NullPointerException 错误通常是因为代码中出现了一个空引用，即 null。当尝试对这个空引用进行操作时，就会出现 NullPoin

╰+哭是因爲堅強的太久メ/ 2023年10月08日 21:29/ 0 赞/ 22 阅读

相关 ThinkPHP路由不转换的原因及解决方法

随着互联网的发展，网站开发技术日新月异。而ThinkPHP作为一款流行的PHP开发框架之一，也在不断地吸纳更多的开发者来使用。然而，有时候我们在使用过程中会遇到一些问题，比如T

港控/mmm°/ 2023年09月26日 19:54/ 0 赞/ 129 阅读

相关 wx.request()获取不到数据的原因

之前做一个项目，在本地测试一切正常。小程序js代码： wx.request({ url: 'http://localhost:88/test.

以你之姓@/ 2022年10月02日 11:56/ 0 赞/ 266 阅读

相关获取不到 id 元素的问题原因及解决办法

> 感谢内容提供者：[金牛区吴迪软件开发工作室][Link 1] > 提前声明，想要直接看解决办法的可直接略过中间部分点击：五、问题解决文章目录一、背景

女爷i/ 2022年09月04日 12:59/ 0 赞/ 558 阅读

相关 webDriver定位不到元素，常见原因和解决方法

webDriver常用来做ui自动化，但对于一些页面上的元素，通过WebDriver封装的findElement方法获取不到一、可能原因： 1、元素定位时使用xp

蔚落/ 2022年07月21日 02:21/ 0 赞/ 1011 阅读

相关 SpringMVC接收不到网页POST方式的参数（找不到原因的解决方法）

SpringMVC接收不到网页POST方式的参数， [spring][] mvc如果要接收 multipart/form-data 传输的数据，应该在spring上下文配置

野性酷女/ 2022年07月16日 03:08/ 0 赞/ 681 阅读

相关 idea中springboot整合mybatis找不到mapper接口的原因及解决方法

整合网上以及开发时遇到的错误原因总结：路径不对 1.maper.xml命名空间不对应mapper接口的位置 ![70][] 2.xml方法名未对应上mappe接口里面的方

迈不过友情╰/ 2022年05月05日 00:26/ 0 赞/ 938 阅读

相关 xm-select getValue()获取不到值的解决方法

在使用layui 第三方控件xm-select时发现，getValue()始终获取不到值，在这之前是先调用了setValue()方法的，但是在后续代码中使用get

Love The Way You Lie/ 2021年09月24日 15:40/ 1 赞/ 1043 阅读