vue中ref获取不到dom问题解决，关于this.$nextTick的使用

注意：本篇没有干货

ref有以下用法用法：

1、ref 加在普通的元素上，用thisrefname 获取到的是dom元素

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

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

效果图：

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

vue 问题笔记 ref获取不到指定的DOM节点问题解决

相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要d出个d框，然后我点击对应的关闭按钮，关闭d框，但是新增按钮和关闭按钮 *** 作的是另一个元素，所以需要获取dom元素进行 *** 控，那么在vue中怎么 *** 作dom呢？

以下是常用的三种方法：

1、jQuery *** 作dom（推荐指数：★☆☆☆☆）：

只要拿jQuery的选择器，选中相应的dom进行 *** 作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery *** 作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的 *** 作方法将会失效，必须放到updated里，这样会导致有些 *** 作被执行多遍，所以还是 不建议 在vue中使用jQuery。

2、原生js *** 作dom（推荐指数：★★★★☆）：

原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素

3、vue官方方法：ref（推荐指数：★★★★★）：

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要 *** 作子组件的dom元素，这也是子传父传递数据的一种方法

下面让我来看个案例：

设置了一个button按钮，通过点击事件，然后d出 新增的d框 , 然后点击 “ × ”的button按钮，关闭d框，此时需要 *** 作d框的dom元素，通过ref定义一个名字， 然后在方法中通过 this$refs名字 获取对应的dom

以上就是关于vue中ref获取不到dom问题解决，关于this.$nextTick的使用全部的内容，包括:vue中ref获取不到dom问题解决，关于this.$nextTick的使用、vue *** 控dom、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！