vue3代码 父组件获取子组件

在 Vue 3 中，你可以使用 `ref` 和 `props` 来实现父组件获取子组件。

首先，在子组件中，你需要将希望父组件获取的数据通过 `props` 进行传递。例如，假设你想获取子组件的一个名为 `childData` 的属性，可以将其定义为子组件的 `props`：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String, // 根据实际情况，修改数据类型
      required: true // 根据实际情况，修改是否必需
    }
  },
  // ...
}
</script>

然后，在父组件中，你可以通过使用 `ref` 来引用子组件，并使用 `.value` 来访问子组件传递的数据。例如：

<template>
  <div>
    <!-- 父组件内容 -->
    <child-component ref="child"></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

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

    const getChildData = () => {
      const childData = childComponentRef.value.childData;
      console.log(childData); // 在控制台输出子组件的数据
    };

    return {
      childComponentRef,
      getChildData
    }
  }
}
</script>

在上述代码中，我们通过 `ref` 创建了一个 `childComponentRef`，然后将其赋值给子组件的 `ref` 属性。在 `getChildData` 方法中，我们通过 `childComponentRef.value.childData` 来访问子组件的数据。

这样，父组件就可以获取到子组件传递过来的数据了。当然，你还可以根据实际需求进行修改和适配。希望能帮到你！