ref属性

在使用组件的时候，有时会需获取完整的DOM元素。
以往获取完整DOM元素的方法是通过给DOM元素添加一个id或者其他属性，通过操作DOM拿到一个完整的DOM元素。但是这在vue中是不合适的，vue的目的就是不需要用户操作DOM直接实现功能。因此引出ref属性。
ref属性的使用方法为$refs
为了更好展示，以下面的组件代码为例说明。

<!-- 父组件 -->
<template><div><h1 v-text="msg" ref="title"></h1><button ref="btn" @click="showDOM">点我输出上方的DOM元素</button><People ref="peo"/></div>
</template><script>//引入People组件import People from './components/People.vue'export default {name:'App',components:{People},data() {return {msg:'欢迎学习Vue！'}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素console.log(this.$refs.btn) //真实DOM元素console.log(this.$refs.peo) //School组件的实例对象（vc）}},}
</script>
<!-- 子组件 -->
<template><div><!-- <button @click="givedata">给父组件传输数据</button> --></div>
</template><script>export default {name:'People',}
</script>

运行结果如下：

控制台输出结果如下：

注意：

1. ref被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象
3. 使用方式：
   1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
   2. 获取：this.$refs.xxx