day74-ref属性

ref属性

用于给元素或者子组件注册引用信息，是id的替代者

实现

首先配置school组件

 <template>
   <div class="demo">
     <h2>学校名称：{{name}}</h2>
     <h2>学校地址：{{address}}</h2>
   </div>
 </template>
 ​
 <script>
 export default {
   name: "SchoolName",
   data(){
     return{
       name:'中南大学',
       address:'changsha'
     }
   }
 }
 </script>
 ​
 <style scoped>
   .demo{
     background-color: gray;
   }
 </style>

 

在app组件中对普通dom与组件标签设置ref属性

 <template>
   <div>
     <h1 v-text="msg" ref="title"></h1>
     <button @click="show">点我输出上方dom</button>
     <SchoolName ref="sch"/>
   </div>
 ​
 </template>

 

之后配置应用ref

 <script>
 import SchoolName from "@/components/StudentMsg";
 export default {
   name: "App",
   data(){
     return{
       msg:'欢迎学习vue'
     }
   },
   components:{
     SchoolName
   },
   methods:{
     show(){
       console.log(this.$refs.title)
       console.log(this.$refs.sch)
     
     }
   }
 }
 </script>

 

总结

 /*
     * ref属性：
     * 1.用来给元素或子组件注册引用信息，id的替代者
     * 2.应用在html标签上获取的是真实dom元素，应用在组件标签上是组件的实例对象
     * 3.使用方式：
     *   打标识<SchoolName ref="xxx"/> 或者<h1 v-text="msg" ref="xxx"></h1>
     *   获取：this.$refs.xxx
     * */