ref属性

Vue 中 可以给标签（HTML元素标签、组件标签）加上一个 ref 属性，作用就是给 标签加上一个标识，可以通过该标识获取当前需要的DOM元素或者组件实例对象。

通过原生js获取DOM

如果使用原生js来获取DOM元素时，我们最简单的就是通过 id 来精准获取，因为id是唯一的。

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    showDOM(){
      console.log(document.getElementById("title"))
      console.log(document.getElementById("btn"))
      console.log(document.getElementById("helloWorld"))
    }
  }
}

点击按钮之后在控制台上可以看到当前的三个DOM元素。 diiv 和 button 两个DOM 元素展示都是正常的，但是 School 组件可以看到，展示的是 School 组件内部的元素结构，id 加在了 School组件最外层 div 上。

 

但是，在 Vue 项目里面直接使用  原生js 来获取DOM节点，始终感觉怪怪的。所以Vue提供了 ref 属性来获取。实际上就是将 id 换成了 ref ，以此来提供一个唯一标识

点击按钮之后，我们看看当前 this 对象中存在一个 refs 属性

可以看到，在refs 中存在三个 属性，分别是 我们在DOM 节点上定义的三个 ref，且这三个ref 对应的就是我们 需要的 DOM节点，以及  组件实例对象。至于为什么组件上添加 ref 属性之后，获取的是组件实例对象 而不是单纯的 DOM 节点，这是因为我们在后续的开发过程中，可能会用到组件实例对象中的某些属性，方法，或其他的数据，这就是ref 的优势所在。

总结

1、ref 是被用来 给 元素 或者 子组件 注册引用信息的( 替代id )

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

3、使用方式：

        打标识：

                html标签：

展示DOM结构

                组件标签：

        获取方式：this.$refs.xxx