vue中ref的理解

在Vue中，ref 是一个被用来给元素或子组件注册引用信息的属性。通过 ref，我们可以在Vue组件的JavaScript部分直接访问到对应的DOM元素或子组件实例。这对于需要在Vue的methods、computed属性或watch中直接操作DOM元素或调用子组件方法时非常有用。

使用方式

1. 在元素上使用：
   当你想要在Vue组件的JavaScript代码中直接访问某个DOM元素时，可以给这个元素添加 ref 属性，并赋予一个唯一的引用名（ID）。然后，在Vue组件的 mounted 钩子（或其他生命周期钩子或方法中），你可以通过 this.$refs 加上你指定的引用名来访问这个DOM元素。

<template>
    <input ref="myinput">
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const myinput = ref()
onMounted(() => {
  console.log(myinput.value)
})


</script>

可以获取dom元素

 在子组件上使用：
当你想要在父组件中直接访问子组件的实例时，可以给子组件的 <template> 标签添加 ref 属性。然后，在父组件中，你可以通过 this.$refs 加上你指定的引用名来访问子组件的实例，并调用其方法或访问其数据。

<!-- 子组件 ChildComponent.vue -->  

<template>  

  <div>子组件内容</div>  

</template>  

 

<!-- 父组件 -->  

<template>  

  <div>  

    <ChildComponent ref="childRef" />  

    <button @click="callChildMethod">调用子组件方法</button>  

  </div>  

</template>  

 

<script>  

import ChildComponent from './ChildComponent.vue';  

 

export default {  

  components: {  

    ChildComponent  

  },  

  methods: {  

    callChildMethod() {  

      // 假设子组件有一个名为myMethod的方法  

      this.$refs.childRef.myMethod();  

    }  

  }  

}  

</script>

 

注意事项

• ref 只在组件渲染完成后填充，并且它们不是响应式的。这意呀着你不能在模板中或计算属性中直接使用它们。
• 如果 ref 用在 v-for 上，那么 $refs.myRef 将会是一个包含了多个DOM元素或子组件实例的数组。
• $refs 只在组件渲染完成后填充，并且它们不是响应式的。这意味着你不能在模板中或计算属性中直接使用它们进行条件渲染或数据绑定。它们主要用于直接的DOM操作或组件方法调用。
• 如果需要基于 ref 的值进行响应式的数据绑定或条件渲染，请考虑使用Vue的响应式数据和方法来实现。