一.ref

ref 有三种用法：
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this.refs.（ref值）.方法（） 就可以使用了。

3、利用 v-for 和 ref 获取一组数组或者dom 节点
　　如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
　　这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）

二、vm.$el

获取Vue实例对象关联的DOM元素
需求：我自定义一个组件Comp ，我想要获取他的的offsetTop（offsetTop 可以获得 HTML 元素距离上方或外层元素的位置），要怎么做？
1、在组件里面设置属性 ref=' comps'，然后this.$refs.comps，就获取到了该组件

image.png

2、获取offsetTop ，组件不是dom元素，是没有offsetTop 的，如果想要获取，需要通过$el获取

image.png
image.png

代码如下：

<template>
  <div class="home">
    <Comp ref="comps"/>
    <button @click="getel()">点击</button>
  </div> 
</template>
<script>
import Comp from '@/components/Comp'
export default {
  name: "Home",
  components:{
    Comp
  },
  methods:{
    getel(){
      console.log(this.$refs.comps);//得到该组件
      console.log(this.$refs.comps.$el.offsetTop);//获取到offsetTop 的值
    }
  }
};

</script>