Vu3获取子组件实例

1、在父组件中找到子组件标签使用ref进行绑定

<template>
    <view>
	   <factoryA ref="factoryone"></factoryA>
	</view>
</template>

2、获取子组件实例

直接打印会报错，因为子组件没有抛出数据，此时父组件获取不到子组件的数据

<template>
	<button style=" "type="primary" @click="submit">提交</button>
</template>


<script setup>
// 获取子组件实例   ref
const factoryone = ref()
//底部下一步按钮（既是下一步也是保存）
function submit() {
	console.log(formData.value)
	console.log(factoryone.value.formDataA, "获取子组件的数据")
}
<script>

3、在子组件中将子组件数据抛出

引入defineExpose方法 ，抛出想要父组件获取到的数据

<script setup>

import {defineExpose} from "vue"

// 子组件数据
const formDataA = ref({
	msg: '子组件数据' ，
})

//这里需要暴露出去不然父组件调用不到这个数据
defineExpose({
	formDataA
})
<script>