ref(代替id)

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>