vue3 ref获取组件

在 Vue 3 中，使用 `ref` 可以获取组件实例，具体步骤如下：

1. 在组件内声明 `ref` 变量，并将其初始化为 `null`。

<template>
  <div>
    <p>组件内容</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const compRef = ref(null);
    return {
      compRef
    };
  }
};
</script>

2. 在组件的根元素上添加 `ref` 属性，并将其绑定到 `ref` 变量。

<template>
  <div ref="compRef">
    <p>组件内容</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const compRef = ref(null);
    return {
      compRef
    };
  }
};
</script>

3. 在组件外部使用 `$refs` 属性访问 `ref` 变量，即可获取组件实例。

<template>
  <div>
    <p>组件内容</p>
    <button @click="handleClick">获取组件实例</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const compRef = ref(null);

    const handleClick = () => {
      console.log(compRef.value); // 输出组件实例
    };

    return {
      compRef,
      handleClick
    };
  }
};
</script>

需要注意的是，在使用 `ref` 获取组件实例时，应该确保组件已经渲染完毕。如果组件是在异步加载或延迟渲染的情况下使用 `ref`，可能会出现获取到 `null` 或错误的组件实例的情况。