vue3使用ref获取组件实例

在Vue 3中，使用ref获取组件实例的方法有所改变。在Vue 2中，可以通过$refs来获取组件实例，但是在Vue 3中，$refs是被弃用的，推荐使用ref来获取组件实例。

要使用ref获取组件实例，首先需要在组件中使用ref函数创建一个ref对象，并将其绑定到组件的实例上。然后，可以将这个ref对象传递给子组件，并在子组件中使用toRef函数将其转换为ref。

以下是一个示例：

<template>
  <div>
    <ChildComponent :parentRef="parentRef" />
  </div>
</template>

<script>
import { ref, toRef } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentRef = ref(null); // 创建一个 ref 对象

    return {
      parentRef
    };
  }
};
</script>

在上面的例子中，我们在父组件中创建了一个parentRef的ref对象，并将其传递给了子组件。在子组件中，我们使用toRef函数将这个ref对象转换为ref。

<template>
  <div>
    <button @click="logParentRef">Log Parent Ref</button>
  </div>
</template>

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

export default {
  props: {
    parentRef: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const parentRef = toRef(props, 'parentRef'); // 将传递过来的 ref 对象转换为 ref

    const logParentRef = () => {
      console.log(parentRef.value); // 访问 ref 的值
    };

    return {
      logParentRef
    };
  }
};
</script>

在子组件中，我们使用toRef函数将传递过来的parentRef对象转换为ref，然后可以通过parentRef.value来访问其值。

需要注意的是，在Vue 3中，ref返回的是一个包含.value属性的响应式对象，所以需要通过.value来访问其值