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>
    <div>
        我是子组件
    </div>
</template>
//父组件 TestRef.vue文件
<template>
	<div>
		<TetsRefchild ref="childs"></TetsRefchild>
		<input v-model="input" placeholder="请输入内容" ref="inputs" />
	</div>
</template>
<script type="text/javascript">
import TetsRefchild from "./TestRefchild.vue";
export default {
  data() {
    return {
      input: ""
    };
  },
  components: {
    TetsRefchild
  },
  mounted() {
    console.log(this.$refs.inputs.value);
	this.$refs.inputs.value = "闹闹";
	console.log(this.$refs.childs.$el);   //<div>我是子组件</div>
	console.log(this.$refs.childs.$parents); //undefined
	console.log(this.$refs.childs.$children); //[]
	console.log(this.$refs.childs.$root);  //打印出Vue的根元素app对象
     //  <div data-v-04c2046b="" id="app"><div data-v-04c2046b=""><div>我是子组件</div>
     //  <input placeholder="请输入内容"></div></div>
	console.log(this.$refs.childs.$root.$el);
        console.log(this.$refs.childs.$el.innerHTML); //我是子组件
  }
};
</script>

我们console.log(this.$refs.childs),可以在控制台看到如下的结果:

他会打印出一个component对象，里面会有children,parent等属性，其实ref的获取DOM，也是根据父子组件之间的传值，拿到我们想要的值。其中我们注意几点：
       a)  $refs属性，注意后面有一个s,他是获取组件内的元素
       b)  $parent,获取当前组件对象的父组件
       c)  $children，获取子组件
       d)  $root，获取new Vue的实例，即vm
       e）$el，获取对象的DOM元素

3.ref与nextTick的连用
首先我们得知道，vue响应式不是在数据发生改变后，DOM元素立即更新的，他是有一定的机制在里面的，我们这时候可以使用$nextTick，他的作用就是，在 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。请看下面的例子：

<template>
    <div>
        <input type="text" v-show="isShow" ref="inputs" />
    </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  mounted() {
    this.isShow = true;
    this.$nextTick(() => {
      this.$refs.inputs.value = "闹闹";
      this.$refs.inputs.focus();
    });
  }
};
</script>

   结果:

   截图就是input框内的 value值为‘闹闹’,焦点也会聚焦，但是截图无法截取到，大家可以私下试试。如果我们不在nextTick里面去    执行赋值和聚焦，控制台会报focus undefined错误。所以，当页面加载的时候，将input框显示出来，此时我们去拿DOM元素，    是拿不到的，使用nextTick，让input元素完全被渲染到页面上之后再去操作，这时候就可以拿到值了。