【Vue2.0学习】—ref属性（五十三）

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDow" ref="btn">点我输出上方的DOM元素</button>
    <School ref="sch"/>
   <!-- 
    ref属性：
    被用来给元素或子组件这些引用信息（id的替代者）
    应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件的实例对象(vc)
    使用方式：
     打标识：<h1 ref="XXX">……</h1>或 <School ref="XXXX"/>
     获取：this.$ref.XXX
    -->
  </div>
</template>
<script>
import  School from './components/School'
export default {
  name: 'App',
  data(){
    return{
        msg:'欢迎学习Vue'
    }
  },
  components: {
    School
  },
  methods: {
    showDow(){
        console.log(this.$refs.title),//真实DOM
        console.log(this.$refs.btn),//真实DOM
        console.log(this.$refs.sch)//School组件的实例对象
    }
  }
}
</script>
<style>
</style>