ref属性介绍

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

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

3、使用方式：

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

获取：this.$refs.xxx

4、案例：

<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'
	import Student from './components/Student'
	
	export default {
		name:'App',
		components:{
			School,
			Student
		},
		data(){
			return {
				msg:'欢迎学习Vue！',
			}
		},
		methods:{
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象
			}
		}
	}
</script>

效果：

点击按钮后：

Vue2--Vue脚手架ref

ref属性介绍