33vue学习——使用 ref 获取 DOM 元素和组件的引用

33vue学习——使用 ref 获取 DOM 元素和组件的引用

前言

在使用原生的 js 的时候，我们要获取一个 DOM 元素是一个十分简单的事情，只要给他加上一个 id 的属性值，我们就可以通过 getElementById 的方法直接获取，但是这就操作了 DOM 元素了，这是 vue 所不提倡的。那 vue 有给我们提供其他的方法呢？ ref 就是 vue 提供给我们获取 DOM 元素的，让我们一起来学习吧。

步骤：

（1）给要获取的 DOM 元素添加 ref 属性，并设置该属性的值：

（2）通过 this.$refs.myh3 获取到 h3：

注意：
（1）我们在 元素上设置属性的时候是 ref
（2）我们在使用 this 获取的时候是 $refs

通过 ref 属性不但可以获取 DOM 元素，还可以作用在组件身上，让父组件可以通过 this.$refs 来获取子组件的 data 上的数据和 methods 里的方法

使用 ref 实现组件的引用的步骤：

（1）创建组件：

（2）在页面上引用：

（3）定义 ref 属性：

（4）通过 this.$refs 来调用子组件的方法：