vue3父组件获取子组件中的数据

在Vue3中，父组件可以通过使用`ref`或`$refs`来获取子组件中的数据。

引用[1]中的代码示例展示了一个父组件如何获取子组件中的数据。首先，在父组件的`<template>`标签中，使用`ref`属性给子组件添加一个引用名称，例如`ref="xqmain"`。然后，在父组件的`<script>`标签中，通过`this.$refs.xqmain`来访问子组件的实例。在`created`生命周期钩子函数中，可以使用`this.$nextTick`来确保子组件已经被渲染完毕。通过`this.$refs.xqmain`可以访问子组件的属性和方法，例如`this.$refs.xqmain.isBuys`。[1]

引用[2]中的代码示例展示了另一种父组件获取子组件数据的方法。在父组件的`<template>`标签中，使用`ref`属性给子组件添加一个引用名称，例如`ref="myRefs"`。然后，在父组件的`<script setup>`标签中，通过`const myRefs = ref()`来获取绑定的`ref`。通过`myRefs.value`可以访问子组件的属性和方法，例如`myRefs.value.change()`和`myRefs.value.age`。[2]

引用[3]中的代码示例展示了另一种父组件获取子组件数据的方法。在父组件的`<template>`标签中，使用`ref`属性给子组件添加一个引用名称，例如`ref="sonRef"`。然后，在父组件的`<script>`标签中，通过`const sonRef = ref(null)`来获取绑定的`ref`。通过`sonRef.value`可以访问子组件的属性和方法，例如`sonRef.value.xxx`。[3]

综上所述，父组件可以通过`this.$refs`或`ref`来获取子组件中的数据。