Vue中ref如何深入浅出地高效使用？

本文共计1980个文字，预计阅读时间需要8分钟。

官方说明：

一、前言

官网上的说明

一、前言#

　　在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。但是，当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后，对于 DOM 的操作我们就应当完全的交给框架，而我们只需要关注于数据。难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案当然是可以手动获取到 DOM 元素的，在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能，当然，这也只是 ref 其中一项的功能。本章，我们就来学习 Vue 中 ref 的相关使用。

　　仓储地址：github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

二、干货合集#

　　ref 在 Vue 中是用来给元素或是子组件注册引用信息到父组件或是 Vue 实例上，注册后的引用信息都会呈现在父组件/Vue 实例的 $.refs 上，这时，我们就可以通过 $.refs 获取到引用的 DOM 对象或是子组件信息。

　　例如，我们可以获取到页面上添加了 ref 的 input 输入框的值，对于子组件来说，我们可以直接获取到子组件 data 选项中的数据，或是直接调用子组件的方法。