ref属性

1.被用来给元素或子组件注册引用信息（id 的替代者）
2.应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：
打标识：<h1 ref="xxx"></h1>或<School ref="xxx"> </School>
获取：this.$refs.xxx

<template>
  <div>
    <h1 ref="title">{{ msg }}</h1>
    <button ref="btn" @click="showDom">点我输出h1 DOM</button>
    <School ref="sch" />
  </div>
</template>

<script>
// 引入组件
import School from './components/School.vue'

export default {
  name: 'App',
  data() {
    return {
      msg: '我是一个学生',
    }
  },
  methods: {
    showDom() {
      console.log(this.$refs.title) //DOM元素
      console.log(this.$refs.btn) //DOM元素
      console.log(this.$refs.sch) //组件实例对象
    },
  },
  components: {
    School,
  },
}
</script>