vue3子组件ref

在Vue3中，如果想要获取子组件的ref，可以通过使用`ref`和`defineExpose`来实现。子组件可以将需要暴露给父组件的数据和方法通过`defineExpose`方法暴露出来，然后在父组件中使用`ref`来获取子组件的ref。具体的实现步骤如下：

1. 在子组件中，使用`defineExpose`方法暴露需要暴露给父组件的数据和方法。例如：

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

export default {
  setup() {
    // 子组件的数据和方法
    const data = ref('子组件的数据');
    const method = () => {
      console.log('子组件的方法');
    };

    // 将数据和方法暴露给父组件
    defineExpose({
      data,
      method,
    });

    return {
      data,
      method,
    };
  },
};
</script>

2. 在父组件中，使用`ref`来获取子组件的ref，并通过子组件的ref来访问子组件的数据和方法。例如：

<template>
  <ChildComponent ref="childRef" />
  <button @click="getChildData">获取子组件数据</button>
  <button @click="callChildMethod">调用子组件方法</button>
</template>

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

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

    const getChildData = () => {
      console.log(childRef.value.data);
    };

    const callChildMethod = () => {
      childRef.value.method();
    };

    return {
      childRef,
      getChildData,
      callChildMethod,
    };
  },
};
</script>