Vue ref 属性

作用：用来给元素或子组件注册引用信息（id 的替代）

应用在 html 标签上获取的是真实 DOM 元素，应用在w组件标签上是组件实例对象

标识：<h1 ref='xxx'></h1> 或 <School ref='xxx'>

获取：this.$refs.xxx

---

示例

<template>
    <div id="app">
        <h2 v-text="msg" ref="hello"></h2>
        <School ref="sch"/>
        <button @click="showDOM">点我输出</button>
    </div>
</template>

<script>
    import School from "@/components/School";

    export default {
        name: 'App',
        components: {
            School
        },
        data() {
            return {
                msg: '你好'
            }
        },
        methods: {
            showDOM() {
                console.log(this.$refs.hello) // 真实 DOM 元素
                console.log(this.$refs.sch) // School 组件的实例对象
            }
        }
    }
</script>

---