ref属性

<!-- 模板   不管属性， 方法 都可以访问 组件实例的所有property，无论如何定义， 都可以在组件的模板中访问 -->
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <template>
    <div>
      <h1 v-text="msg" id="dome" ref="title"></h1>
      <button @click="showDOM" ref="btn">点我输出上方的dom元素</button>
      <School ref="sch" />
    </div>

    ref属性
    1.被用来给元素或子组件注册引用信息(id的替代者)
    2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
    3.使用方式:
              打标识: <h1 ref="xxx">......</h1> 或 <School ref="xxx" ></School>
              获取: this.$refs.xxx
  </template>
  
  <script>
  // 引入school组件
  import School from './components/School.vue'
  export default {
    name: 'App',
    components: {
      School
    },
    data() {
      return {
      msg : '不需要建议 不需要认同 喜欢就值得'  
      }
    },
    methods :{
      showDOM () {
        // console.log(document.getElementById('dome'))
        console.log(this.$refs)
        console.log(this.$refs.title) // 真实DOM元素
        console.log(this.$refs.btn)  // 真实DOM元素
        console.log(this.$refs.sch)   // School组件的实例对象
      }
    },
  
  }
  </script>
  
  <style>
  
  </style>

  ----------------------------------------------------------------------------------

<template>
  <div class="demo">
    <h2>名称:{{name}}</h2>
    <h2>信息:{{mes}}</h2>

  </div>
</template>

<script>
export default {
    name:'MySchool',
    data() {
        return {
            name:'慢慢来吧',
            mes:'沉默和睡觉是我逃避一切的办法， 可是我睡不着， 我只能沉默',
        }
    },


}
</script>

<style>
.demo{
    background-color: skyblue;
}

</style>