1、官方介绍：ref 用于访问子组件实例或子元素
尽管存在prop和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件，为了达到这个目的， 你可以通过ref这个 attribute 为子组件副语言一个ID引用，例如：
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个ref的组件里，你可以使用：
this.$refs.usernameInput
来访问这个<base-input>实例，以便不时之需。比如程序化地从一个父组件聚焦这个输入框。在刚才的例子中，该<base-input>组件也可以使用一个类似的ref提供对内部这个指定元素的访问，例如：
<input ref="input">
甚至可以通过其父级组件定义的方法：
methods:{
//用来从父级组件聚焦输入框
focus:function(){
this.$ref.input.focus();
}
}
这样就允许父级组件通过下面的代码聚焦<base-input>里的输入框：
this.$ref.usernameInput.focus();
当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
注意：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的"逃生舱"——你应该避免在模板或计算机属性中访问$ref。
2、例子：获取子组件中的data
比如我们先声明一个子组件：
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default{
data(){
return{
msg: "hello world"
}
},
methods:{
open:function(){
console.log("被调用了");
}
}
}
</script>
父组件：点击button时会调用父组件的getHello方法，在getHello方法中，通过$ref调用了子组件的data数据msf，正常输出子组件msg的值：hello world，并调用子组件的open方法输出：被调用了。
<template>
<div id="app">
<HelloWorld ref="hello">
<button @click="getHello">获取helloworkd组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default{
components:{
HelloWorld
},
data(){
return{
}
},
methods:{
getHello(){
console.log(this.$ref.hello.msg);
this.$refs.hello.open();
}
}
}
</script>
3、例2：子组件调用父组件的方法：
子组件：
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用了");
// 调用父组件方法
this.$emit("refreshData");
}
}
}
</script>
父组件：
点击button按钮：调用getHello方法，在getHello方法中通过$refs调用子组件的open方法，在open方法中又通过$emit调用了父组件的getData方法。
正常输出：调用了 和 111111
<template>
<div id="app">
<HelloWorld ref="hello" @refreshData="getData"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
}
},
methods: {
getHello() {
this.$refs.hello.open()
},
getData() {
console.log('111111')
}
}
};
</script>