ref属性

ref属性

1.被用来给元素或组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3.使用方式：

打标识：<h1 ref="xxx">........</h1> 或 <School ref='xxx'></School>

获取：this.$refs.xxx

注：School是App的子组件

4.id应用在普通的html标签上和组件标签上获取的是DOM元素

 

案例：

App.vue

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

<script>
      //引入组件
        import School from './components/School'

      export default{    
            name:'App',   
              components:{
                School
              },
              data(){
                   msg:"欢迎学习vue"
               },
               methods:{
                    showDOM(){
                         console.log(this.$refs)
                    }
                } 
         }
</script>