App.vue
<template>
<div>
<Student ref="str"/>
<h3 v-text="age" ref="age"></h3>
<button @click="show()">点击button，输出年龄</button>
</div>
</template>
<!--
ref属性：
1.作用：id代替者，给html元素和子组件注册各种功能
2.应用场景：真实dom，组件实例对象
3.使用方式：<Student ref="别名"/> 或 <h3 v-text="age" ref="别名"></h3>
获取：this.$refs.xxx
-->
<script>
import Student from './components/Student'
export default{
name:'App',
components:{Student},
data(){
return{
age:'我的年龄是:19'
}
},
methods:{
show(){
console.log(this.$refs.age)//真实dom
console.log(this.$refs.str)//student的实例对象
}
}
}
</script>
<style>
</style>
student.vue
<template>
<div>
<h3>学生名称：{{name}}</h3>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'wei'
}
}
}
</script>
<style>
</style>
标签：console,name,refs,代替,Student,export,ref,id From： https://www.cnblogs.com/wsx123/p/17128323.html