一.用处

1.被用来给元素或子组件注册引用信息；
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象；
3.使用方式：


<template>
  <div>
    <h1 v-text="msg"  ref="title"></h1>
    <School ref="sch"></School>
    <button ref="btn" @click="showDom">点我输出上方DOM元素</button>
  </div>
</template>
<script>
//引入School组件
import School from './components/School.vue'
export default {
    name:'App',
    data(){
        return{
            msg:'欢迎学习vue！'
        }
    },
    components:{School},
    methods:{
        showDom(){
           
            // console.log(document.getElementById("tit"))  在vue文件内，尽量不使用原生DOM操作
            console.log(this.$refs.title)  //真实DOM元素:元素h1
            console.log(this.$refs.btn)   //真实DOM元素:元素button
            console.log(this)  //输出App组件对象
            console.log(this.$refs.sch)  //组件实例对象：App组件的子组件School对象(vc)
        }
    }
}
</script>
<style>
</style>

输出结果：
image