一.ref
ref 有三種用法：
1稚矿、ref 加在普通的元素上蔓倍，用this.$refs.（ref值） 獲取到的是dom元素
2、ref 加在子組件上盐捷，用this.refs.（ref值）.方法（） 就可以使用了碉渡。
3聚谁、利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)
如果通過(guò)v-for 遍歷想加不同的ref時(shí)記得加 :號(hào)，即 :ref =某變量 ;
這點(diǎn)和其他屬性一樣滞诺，如果是固定值就不需要加 :號(hào)形导，如果是變量記得加 :號(hào)环疼。（加冒號(hào)的，說(shuō)明后面的是一個(gè)變量或者表達(dá)式朵耕；沒(méi)加冒號(hào)的后面就是對(duì)應(yīng)的字符串常量（String）
二炫隶、vm.$el
獲取Vue實(shí)例對(duì)象關(guān)聯(lián)的DOM元素
需求：我自定義一個(gè)組件Comp ，我想要獲取他的的offsetTop（offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置）阎曹，要怎么做伪阶？
1、在組件里面設(shè)置屬性 ref=' comps'处嫌，然后this.$refs.comps栅贴，就獲取到了該組件
image.png
2、獲取offsetTop 熏迹，組件不是dom元素檐薯，是沒(méi)有offsetTop 的，如果想要獲取注暗，需要通過(guò)$el獲取
image.png
image.png
代碼如下：
<template>
<div class="home">
<Comp ref="comps"/>
<button @click="getel()">點(diǎn)擊</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>
