知识点

1. 被用来给元素或子组件注册引用信息（ id 的替代者）

2. 应用在 HTML 标签上获取的是真是 DOM 元素，应用在组件标签上是组件实例对象（vc)

3. 使用方法

   1. 打标识

      <h1 ref="title"></h1>
      <School ref="school"></School>

   2. 获取

      this.$refs.xxx

代码实现

代码

<template>
    <div>
        <h2 ref="title">Hello</h2>
        <School ref="school"></School>
        <button @click="showRef">点我输出 ref</button>
    </div>
</template>

<script>
    import School from './components/School.vue';

    export default {
        name: 'App',
        components: {
            School
        },
        methods: {
            showRef(){
                console.log(this.$refs.title);
                console.log(this.$refs.school);
            }
        },
    }
</script>

运行结果