$refs是vue操作DOM用的，每一个vue组件实例上，都包含一个$refs对象，里面存储对应的DOM元素或组件的引用，默认情况下$refs对象为空

目录

1  $refs在哪

2  使用ref操作DOM

3  使用ref操作组件

3.1  使用组件方法

3.2  操作组件数据

4  this.$nextTick DOM生成之后在执行代码

4.1  引入案例

4.2  使用 this.$nextTick

4.3  使用updated()替代

---

1  $refs在哪

我们就用App组件上看一下$refs

2  使用ref操作DOM

我们可以给某一个标签加上ref属性，属性名称自定

ref的名称不能给多个元素，如果给多个元素，ref只认最后一个有ref属性的元素

点击按钮后发现refs中出现了相应的内容

这样我们就可以在JS中获取DOM了，我们现在想点击一下按钮，让h1变红

点击一下发现颜色变红了

3  使用ref操作组件

3.1  使用组件方法

我们先搞一个组件SON1

然后给SON1 ref，之后打印出来看看

发现打印结果中有我们在组件中定义的方法

那么我们就可以通过ref使用这个方法

3.2  操作组件数据

我们在SON1定义一组数据

打印看一下

可以找到这个数据

我们操作一下这个数据

点击后让这个count变为100了

4  this.$nextTick DOM生成之后在执行代码

4.1  引入案例

我们现在做一个 按钮与文本框 切换的demo，当按 按钮 的时候，显示input，当input失去焦点时，显示按钮

功能可以搞定

但在切换为input的时候，input无法自动获取焦点

我们这个时候借助ref使用DOM方法

这个时候当点击按钮的时候会报错

4.2  使用 this.$nextTick

报错的原因是使用focus()的时候，input还没有被生成，我们需要在DOM生成完毕之后，再让焦点定在input上

• this.$nextTick()参数为回调函数

这样点击完按钮，焦点就会定在input上了

4.3  使用updated()替代

可以达到相同的效果，缺点时 updated() 在每一次数据改变的时候都会触发，这样写会损失一部分性能