Vue ref访问这些元素或组件的实例

可以在任意DOM元素上使用ref属性，然后在Vue实例中通过this.$refs访问这个DOM元素 

 1.访问子组件实例，可以调用方法或者获取值

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus(); // 让输入框获得焦点
    }
  }
};
</script>

 2.访问子组件实例，可以调用方法或者获取值

template>
  <ChildComponent ref="childRef" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.someMethod(); // 调用子组件的方法
      this.$refs.childRef.name;         // 获取子组件的数据
    }
  }
};
</script>