ref 属性

被用来给元素或者子组件注册引用信息（id 的替代者）

通过案例来演示_ref 属性

1 编写案例

如图：有一个按钮，点击按钮可以输出 dom 元素

备注：虽然 vue 不用我们亲自操作 dom，但是有的特殊的情况下就要亲自操作 dom

页面就是这个样子的

2 传统操作 dom

如果使用传统的方式，给属性一个 id，再使用 document,getElementById 是可以操作的，但是这些代码，本身就不应该出现在 vue 中，这里我应该给 h1id 属性的，但是给错了，问题不大

虽然可以实现，但是不推荐

3 vue 的 ref 属性

原生的 html 喜欢给元素 id 标识，在 vue 中有类似的办法，不过不是使用 id 而是 ref

这里面我给 h1 标签一个 ref 属性，然后单击的时候输出 vc，可以看到里面有一个 $refs 属性，里面就死定义的 ref 属性

既然已经找到了 refs，那么就可以使用 $refs 编写了

也是可以正常拿到 dom 元素的

4 细节问题

组件标签 ref 属性

上面我是给 h1 标签加了 ref 属性，h1 属性 html 标签，但是如果想给 school 标签加 ref 呢？school 可是组件标签

我们测试下

发现如果给组件标签加了 ref，得到的就是这个组件的 vc 实例对象

组件标签 id 属性

但是如果给组件标签 id 标识，并且通过 dom 获取 id，获取到的就不是 vc 实例对象了

观察发现得到的是实例的根容器

5 ref 属性总结

1 被用来给元素或者子组件注册引用信息（id 的替代者）

2 应用在 html 标签上获取的是真实的 DOM 元素，应用在组件标签上是组件实例对象（vc）

3 使用方式：

打标识：<h1 ref="xxx">....</h1>或<school ref=""></school>

获取：this.$refs.xxx