vue的ref属性的相关介绍

最新推荐文章于 2025-06-27 10:41:59 发布

Little_Pig_Bug

最新推荐文章于 2025-06-27 10:41:59 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue $refs vue获取DOM mounted $nextTick

本文链接：https://blog.youkuaiyun.com/Little_Pig_Bug/article/details/81324366

vue 专栏收录该内容

25 篇文章

订阅专栏

Vue的ref属性允许我们方便地操作元素或组件的DOM。在mounted生命周期后，可以通过this.$refs获取元素或组件。$refs返回的是一个对象，包含组件内部元素，如$el获取DOM元素，$children获取子组件，$parent获取父组件，$root获取Vue实例。需要注意，数据变化到DOM更新存在延迟，使用$nextTick确保在DOM更新后执行操作，例如设置焦点或获取最新值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作习惯了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元素完全被渲染到页面上之后再去操作，这时候就可以拿到值了。