vue給我們提供一個(gè)操作dom的屬性慈缔，ref羡亩。綁定在dom元素上時(shí)，用起來(lái)與id差不多，通過(guò)this.$refs來(lái)調(diào)用:
<div ref="test">test</div>
console.log(this.$refs.test)
image.png
看到打印出來(lái)就是綁定的dom對(duì)象陵刹，可以用來(lái)執(zhí)行一些dom操作，比如操作樣式，獲取屬性等:
let testDom = this.$refs.test
testDom.style.height = '200px'
testDom.style.background = 'red'
console.log(testDom.clientHeight)
可以看到如果綁定在普通的dom元素上衰琐，與id用法基本一樣也糊，那肯定還有別的用法，比如 循環(huán)渲染:
//簡(jiǎn)單的數(shù)組:
list:[1,2,3,4]
//綁定在循環(huán)渲染上
<ul>
<li v-for="(item,index) in list" :key="index" ref="list">
{{index}}--{{item}}
</li>
</ul>
//打印看一下這個(gè)ref="list"是什么
console.log(this.$refs.list)
image.png
可以看到是個(gè)數(shù)組羡宙，也很好理解狸剃，數(shù)組的每一項(xiàng)就是每個(gè)li元素。
- ref除了這兩個(gè)用法狗热，還有另一種用法钞馁，綁定在組件標(biāo)簽上:
比如說(shuō)我現(xiàn)在有個(gè)組件test:
<template>
<div style="height:200px;background:red;"></div>
</template>
<script>
export default {
name:'test',
data() {
return{
data:1
}
},
methods: {
_alert() {
alert('test-ref')
}
}
}
</script>
然后我把別的地方引用它，并綁定ref:
<test ref="test"></test>
//打印出來(lái)看看這次是什么
console.log(this.$refs.test)
image.png
可以看到這次和我們之前綁定在dom元素上有很大的不同匿刮，這次獲取到的是一個(gè)VueComponent對(duì)象僧凰，里面有這個(gè)組件的各個(gè)屬性，這些屬性里面有一個(gè)$el熟丸，這就是dom對(duì)象训措，就是和我們直接綁定在dom元素上獲取的一樣:
let testDom = this.$refs.test.$el
console.log(testDom.clientHeight) //打印出來(lái)就是設(shè)置的200
這個(gè)$el屬性，而且我們可以看到里面還有我們?cè)O(shè)置在data里面的變量光羞，我們是可以直接通過(guò)這種ref的方式去修改绩鸣，它就等于拿到那個(gè)組件的this，可以直接調(diào)用纱兑，不僅是data里面的變量呀闻，還有methods里面的方法:
//調(diào)用在之前組件里面定義的_alert()方法
this.$refs.test._alert()
image.png
這種用法特別適合在用ui框架的組件的時(shí)候，ui框架給我們提供了很多組件的方法潜慎，就是要通過(guò)這個(gè)ref去調(diào)用,比如說(shuō)element-ui的樹(shù)形組件:
image.png
還有許多总珠，用到外部框架組件的時(shí)候，就需要使用這種方法勘纯。
