vue3.2中setup语法糖父组件如何调用子组件中的方法

父组件如何调用子组件中的方法

父组件.vue
<template>
  <div>
    <aa ref="testRef"></aa>
    <el-button @click="fatherHandler">调用父组件中的方法</el-button>
  </div>
</template>
<script setup lang="ts">
import { reactive ,ref} from "vue";
import aa from '../components/ChaCao.vue'
const testRef=ref()

const fatherHandler=()=>{
    testRef.value.changeInfoApi({
        name:'白风夕',
        sex:'女'
    })
}
</script>

子组件.vue
<template>
  <div class="main">
       <h2>我是子组件</h2>
        <h2>姓名:{{info.name}}</h2>
      <h2>姓别:{{info.sex}}</h2>
  </div>
</template>

<script setup lang="ts">
import { reactive,defineExpose } from "vue";
let  info=reactive({
    name:'丰兰息',
    sex:'男'
})

// 改变组件的中的方法
const changeInfoApi=(mess:any)=>{
    info.name=mess.name
    info.sex=mess.sex
}
// 将这个方法暴露出去,这样父组件就可以使用了哈
defineExpose({
    changeInfoApi,
})
</script>