ref属性相当于给标签设置了一个ID，可以使用该特殊标识来进行一些DOM的操作，但是使用的时候有如下几个注意事项：
ref属性值绑定元素都是唯一的，如果一个ref属性绑定了多个dom节点，那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。
使用时不是直接this.ref值进行访问DOM节点，而是需要通过this.
refs属性内。
所有的ref属性进行的操作都不是响应式的，所以避免在计算属性(Computed)，和模板({{}})中使用ref属性。
ref功能还是比较强大的，可以通过ref去调用子组件的方法和data里面的变量，当然调用的时候还是需要使用到nextTick这个全局函数的，vue的生命周期的限制，如果不使用nextTick可能会导致undefined也可能会报错
基本用法，本页面获取dom元素
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
}
}
};
</script>调用子组件中的data
子组件：
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {msg: "hello world"}
}
}
</script>父组件：
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
console.log(this.$refs.hello.msg)
}
}
};
</script>