vue ref($refs)用法

最新推荐文章于 2024-05-26 12:33:53 发布

wei_dan1129

最新推荐文章于 2024-05-26 12:33:53 发布

阅读量6.3k

点赞数 5

文章标签： vue

本文链接：https://blog.csdn.net/wei_dan1129/article/details/108220525

版权

本文详细介绍了Vue中ref和$refs的用法，包括如何通过ref注册引用信息，以及在DOM元素和子组件上的不同表现。讨论了在普通元素上使用ref获取DOM元素，在子组件上使用ref获取组件实例的情况，还提到了利用v-for和ref获取一组元素的方法。同时，指出了在何时何地正确使用ref以确保DOM已经渲染完成的注意事项。

摘要由CSDN通过智能技术生成

通过ref和$refs可以方便的操作DOM元素

ref

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs

$refs是一个对象，持有已注册过 ref的所有的子组件。
在这里插入图片描述

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

<div id="app">
 <div ref="englishAnalysis" class="usageChart"></div>
</div>
<script>
let app = new Vue({
   
 data: {
   
  },
created() {
   
  },
  mounted() {
   
  console.log(this.$refs.englishAnalysis);