代码

代码路径

$ tree -N
.
├── App.vue
├── components
│   └── School.vue
└── main.js

App.vue

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

<script>
    import School from './components/School.vue'
    export default {
        name:'App',
        components:{School},
        data() {
            return {
                msg:'hi'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title); // 真实DOM元素
                console.log(this.$refs.btn); // 真实DOM元素
                console.log(this.$refs.sch); // school组件的实例对象
            }
        },
    }
</script>

School.vue

<template>
  <div>
    <h2>学校名称：{{name}} </h2>
    <h2>学校地址：{{addr}} </h2>
  </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'shangguigu',
                addr:'beijing'
            }
        },
    }
</script>

<style>

</style>

main.js

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App)
});

笔记

关于 ref 属性

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