vue的ref属性的相关介绍

操作习惯了DOM，在用vue操作数据时，我们开始常常很不习惯，但是用ref，我们可以将他绑定在想要操作的元素或者组件上，从或者他们的DOM。下面的例子我们都是在vue-cli搭建的项目下，运行的。

1.获取元素的DOM

<template>
	<div>
		<input  placeholder="请输入内容" ref="inputs" />
	</div>
</template>
<script type="text/javascript">
	export default {
	    data(){
	 	   return {}
		},
	    mounted(){
		  console.log(this.$refs.inputs.value)
		  this.$refs.inputs.value = '闹闹';
	    }
	 }
</script>

  结果：

  首先我们得知道，处于mounted生命周期的时候，元素才会被创建，这时我们才能获取到input，我们也可以在mounted里面调     用页面加载完成时需要请求的数据。

2.获取组件的DOM

//子组件 与父级同级的TestRefchild.vue文件里面
<template>
    <di