父组件如何调用子组件中的方法
父组件.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>