vue3 ref的使用

在Vue 3中，ref是一种特殊的属性，用于注册引用信息。它的主要作用是创建对Vue组件实例的引用，以便在组件内部访问和操作该实例。

使用ref属性需要遵循以下步骤：

在父组件中，使用ref属性为目标子组件创建一个引用。示例代码如下：

<template>  
  <div>  
    <ChildComponent ref="childRef"></ChildComponent>  
  </div>  
</template>
1
2
3
4
5

在上面的代码中，我们为目标子组件ChildComponent创建了一个引用，并将其存储在名为childRef的变量中。

在父组件的setup()函数中，通过onMounted生命周期钩子来访问子组件的引用。示例代码如下：

<script>  
import { onMounted } from 'vue';  
  
export default {  
  setup() {  
    const childRef = ref(null);  
  
    onMounted(() => {  
      const childComponent = childRef.value;  
      // 在这里可以访问和操作子组件的实例  
    });  
  
    return { childRef };  
  },  
};  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上面的代码中，我们首先创建了一个名为childRef的引用变量。然后，在onMounted生命周期钩子中，我们可以访问该引用的值，即子组件的实例。在这个例子中，我们将其存储在名为childComponent的变量中，并可以在后续的代码中使用它来访问和操作子组件的属性和方法。

需要注意的是，在Vue 3中，使用ref属性时需要使用ref()函数来创建一个引用对象。在模板中直接使用ref="childRef"是不正确的，应该使用ref(“childRef”)来创建一个引用对象。在setup()函数中访问引用时，需要使用.value属性来获取引用的值。