Vue3 中获取子组件数据的方式有以下几种：
1. 通过 ref 获取子组件实例
在父组件中使用 ref 属性绑定子组件，然后通过 $refs 属性获取子组件实例。例如：
```html
<template>
<div>
<child ref="child"></child>
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
getChildData() {
const childData = this.$refs.child.data
console.log(childData)
}
}
}
</script>
```
2. 通过 props 传递数据
在父组件中通过 props 属性向子组件传递数据，子组件通过 props 接收数据并在内部处理。例如：
```html
<template>
<div>
<child :data="parentData"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
parentData: '父组件数据'
}
}
}
</script>
```
```html
<template>
<div>
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: String,
default: ''
}
}
}
</script>
```
3. 通过事件向父组件传递数据
在子组件中通过 $emit 方法触发事件，向父组件传递数据。父组件通过 v-on 绑定事件处理函数，接收子组件传递的数据。例如：
```html
<template>
<div>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
export default {
data() {
return {
childData: '子组件数据'
}
},
methods: {
sendData() {
this.$emit('child-data', this.childData)
}
}
}
</script>
```
```html
<template>
<div>
<child @child-data="getChildData"></child>
<p>{{ parentData }}</p>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
parentData: ''
}
},
methods: {
getChildData(data) {
this.parentData = data
}
}
}
</script>
```
以上是 Vue3 中获取子组件数据的几种方式，具体使用哪种方式取决于实际需求。
