vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:
<div ref="test">test</div>
console.log(this.$refs.test)
image.png
看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:
let testDom = this.$refs.test
testDom.style.height = '200px'
testDom.style.background = 'red'
console.log(testDom.clientHeight)
可以看到如果绑定在普通的dom元素上，与id用法基本一样，那肯定还有别的用法，比如 循环渲染:
//简单的数组:
list:[1,2,3,4]
//绑定在循环渲染上
<ul>
<li v-for="(item,index) in list" :key="index" ref="list">
{{index}}--{{item}}
</li>
</ul>
//打印看一下这个ref="list"是什么
console.log(this.$refs.list)
image.png
可以看到是个数组，也很好理解，数组的每一项就是每个li元素。
- ref除了这两个用法，还有另一种用法，绑定在组件标签上:
比如说我现在有个组件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>
//打印出来看看这次是什么
console.log(this.$refs.test)
image.png
可以看到这次和我们之前绑定在dom元素上有很大的不同，这次获取到的是一个VueComponent对象，里面有这个组件的各个属性，这些属性里面有一个$el，这就是dom对象，就是和我们直接绑定在dom元素上获取的一样:
let testDom = this.$refs.test.$el
console.log(testDom.clientHeight) //打印出来就是设置的200
这个$el属性，而且我们可以看到里面还有我们设置在data里面的变量，我们是可以直接通过这种ref的方式去修改，它就等于拿到那个组件的this，可以直接调用，不仅是data里面的变量，还有methods里面的方法:
//调用在之前组件里面定义的_alert()方法
this.$refs.test._alert()
image.png
这种用法特别适合在用ui框架的组件的时候，ui框架给我们提供了很多组件的方法，就是要通过这个ref去调用,比如说element-ui的树形组件:
image.png
还有许多，用到外部框架组件的时候，就需要使用这种方法。
