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

 1 <template>
 2       <div>
 3             <h1 v-text="msg" ref="title"></h1>
 4             <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
 5             <School ref="sch"></School>
 6       </div>
 7 </template>
 8
 9 <script>
10       //引入组件
11         import School from './components/School'
12
13       export default{
14             name:'App',
15               components:{
16                 School
17               },
18               data(){
19                    msg:"欢迎学习vue"
20                },
21                methods:{
22                     showDOM(){
23                          console.log(this.$refs)
24                     }
25                 }
26          }
27 </script>