什么是 ref 引用

vue不建议使用jquey，所以vue提供了ref，用来辅助开发者在不依赖 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。

默认情况下，组件的 $refs 指向一个空对象。

使用 ref 添加引用名称

在对应的 html 标签通过 ref="..." 添加引用名称

查看添加的引用信息

使用 ref 引用 DOM 元素

如果想要使用 ref 引用页面上的 DOM 元素，比如通过 ref 引用名称获取 DOM 元素，改变字体颜色，看如下案例：

使用 ref 引用组件实例

给被引用的组件添加 ref 属性，此时通过 this.$ref.ref.名称，可以拿到组件实例。拿到组件实例后，就可以调用组件上的方法。

即：子组件内 methods 封装的方法，父组件可以通过 $refs 获取到的子组件实例并直接调用

控制文本框和按钮的按需切换，this.nextTick(cb) 方法的使用

案例：点击按钮，展示文本框，并对文本框聚焦，

实现方法：当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。

但存在一个问题，若重新生成文本框元素（DOM 发生变化），则这个过程可视作异步操作，而调用.focus() 方法是同步操作，所以会出现先调用.focus() 方法，再执行生成文本框元素，导致操作无效，如下：

报下面的错误：

解决上面的问题，需要用到 vue 官方提供的 this.nextTick(cb) 方法。

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。

通俗的理解是：等组件的 DOM 异步的重新渲染完成后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。