代码地址：vue_study/vue2-cli/src/components/65 at master · hurong241/vue_study (github.com)

App.vue:

<template>
  <div class="app">
    <p>
      p65:vue ref属性:(获取元素或组件信息)<br/>
      1、ref被用来给元素或子组件注册引用信息（docuement.getElementById中id的替代）<br/>
      2、应用在html标签上获取的是真实dom元素，应用在组件标签上获得的是组件实例对像
    </p>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/65/School.vue";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>

<style>
.app {
  background-color: #999;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p ref="name">名称：{{ name }}</p>
    <p>地址：{{ address }}</p>
    <hr/>
    <Student ref="student"></Student>
    <div><button @click="show">获得引用信息</button></div>
  </div>
</template>

<script>
import Student from './Student.vue'

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {
    Student
  },
  data() {
    return {
      'name': '清华',
      'address': '北京'
    }
  },
  methods: {
    show() {
      //功能类似于document.getElementById
      console.log(this.$refs.name)
      console.log(JSON.stringify(this.$refs.student.students))
    }
  }
}
</script>

<style>

</style>