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

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

背景

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


这是我遇到的错误情况

1024b19218af40c7a8a6290c6186518d.png

1024b19218af40c7a8a6290c6186518d.png

正确的情况是这样

1024b19218af40c7a8a6290c6186518d.png1024b19218af40c7a8a6290c6186518d.png

搜索查询原因

ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。


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


解决方法

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

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




目录
相关文章
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
65 1
|
4月前
|
JavaScript
Vue中如何获取dom元素?vue方法
Vue中如何获取dom元素?vue方法
|
1月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)
|
1月前
|
JavaScript 前端开发
vue创建dom的方法有哪些
vue创建dom的方法有哪些
24 2
|
1月前
|
JavaScript
在created中创建dom操作的方法是什么?
在created中创建dom操作的方法是什么?
8 0
|
4月前
|
存储 JSON JavaScript
详细介绍AngularJS中与HTML DOM交互的各种方法和技术
详细介绍AngularJS中与HTML DOM交互的各种方法和技术
120 0
|
9月前
|
JavaScript
JS(Dom对象的属性和方法)第十六课
JS(Dom对象的属性和方法)第十六课
60 0
|
10月前
|
JavaScript
DOM ------ 修改元素样式属性的两种方法
DOM ------ 修改元素样式属性的两种方法
|
JavaScript
js中获取表单/dom对象的方法
js中获取表单/dom对象的方法
98 0
|
JavaScript
最详细通过DOM获取元素的方法
最详细通过DOM获取元素的方法 上一篇你博文中我们简单的介绍了什么DOM,DOM可以做什么。其中最基本的就是如何通过DOM来获取HTML文档中的元素。这篇文章我们来详细聊一下如何通过DOM获取HTML文档中的元素。 获取HTML文档中的元素从大的方面来区分主要分为两类: 通过元素的标签名,id名等获取。 通过选择器的方法获取 HTML代码: <ul> <li class="item">列表01</li> <li class="item">列表02</li> <li>列表03</li> <li>列表0