zj-Exercise/vue/vue_test/02_src_ref属性/App.vue

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <school id="sch"></school>
    </div>
</template>

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

<script>
    // 引入School组件
    import School from './components/School.vue'
    export default {
        name:'App',
        data() {
            return {
                msg:'欢迎学校Vue！'
            }
        },
        components:{School},
        methods:{
            showDOM(){
                console.log(this.$refs.title)   //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象（vc）
                console.log(this.$refs)
            }
        }
    }
</script>