Defineexpose, the parent component gets the attribute value in the child component

<template>
  <div>
    <div> Parent component </div>
    <detail ref="sonRef"></detail>
    <el-button @click="getSonMessage"> Get subcomponent data </el-button>
    <div>{
   { message }}</div>
    <div v-for="item in state.fatherList " :key ="item.id">{
   { item.name}}</div>
  </div>
</template>
<script setup> import {
       ref,toRefs ,reactive} from "vue"; import detail from "@/views/role/detail.vue"; let sonRef = ref("sonRef"); let message = ref("") let state=reactive({
       fatherList:[], }) let getSonMessage=()=>{
       console.log(sonRef.value.sonInfo,sonRef.value.dataList,"+sonInfo") state.fatherList = sonRef.value.dataList message.value = sonRef.value.message sonRef.value.show() } </script>

<template>
  <div> Child components </div>
  <div v-for="item in state.dataList" :key="item.id">{
   {item.name}} Child components </div>
</template>
<script setup> import {
       defineExpose, onMounted, reactive, ref, toRefs } from "vue"; import {
       getuserListApi } from "@/api/user"; let message = ref(" Simple type "); let state = reactive({
       dataList: [{
       id: 1, name: 123 }], sonInfo: {
       name: " Child components ", tip: " object ", }, }); onMounted(async () => {
       let {
       code, data } = await getuserListApi(); if (code == 0) {
       state.dataList = data; } }); let show = () => {
       console.log(" Subcomponents show Method "); }; let {
       dataList } = toRefs(state); defineExpose({
       // use state.dataList The parent component receives the initialized data , //  Not from onMounted The data from it , But the datalist It's from onMounted The latest data obtained . //  hold dataList from state Inside through toRefs deconstruction , The parent component can also get the latest data  dataList: dataList, message, show, sonInfo: state.sonInfo, }); </script>