Vue3_2024_8天【vue2中的标签ref和vue3中的标签ref的区别】

第一：Vue 2 中的 ref

在 Vue 2 中，ref 主要用于在模板中注册引用信息。它可以用在html标签上或（子）组件上。一旦标签元素或组件被渲染，你就可以通过 this.$refs 来访问它。

<template>  
  <div ref="myDiv">Hello World</div>  
</template>  
  
<script>  
export default {  
  mounted() {  
    console.log(this.$refs.myDiv); // 访问 DOM 元素  
  }  
}  
</script>

在上面的示例中，ref=“myDiv” 被添加到了一个 div 元素上。在组件的 mounted 钩子中，我们可以通过 this.$refs.myDiv 来访问这个 DOM 元素。

第二：Vue3中的ref

和vue2一样，可以用来给标签或组件打标记，不一样的是：*用在标签上，获取的是dom节点 *用在组件上，获取的是组件实例（要想获取节点，需要使用defineExpose转换一下，现比vue2中使用稍微麻烦一点）

ref放标签上：在标签上使用 ref，你可以通过引用直接访问该 DOM 元素。这在需要直接操作或查询 DOM 元素的状态时非常有用。

ref放组件上 : 在组件上使用 ref对于组件，使用 ref 可以让你获取子组件的实例，从而能够调用其方法或访问其属性。