vue3父组件调用子组件的方法是通过expose和ref来实现的，我们可以通过expose来控制父组件可以访问子组件那些的方法和对象，我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。 ###组合式API 父组件通过ref定义子组件实例，通过调用实例获得子组件的数据和方法 ``` <!-- 父组件 app.vue --> <template> <div class="itxst"> <!-- 使用 ref 指令关联子组件 --> <child ref="childComp"/> <button @click="onTry">点击试一试</button> </div> </template> <script setup> import { reactive, ref } from "vue"; import child from "./child.vue"; //定义子组件实例，名称要和上面的ref相同 const childComp = ref(null); //访问demo组件的方法或对象 const onTry = () => { //获取到子组件的 title 数据 let msg = childComp.value.state.title; //调用子组件的 play方法 childComp.value.play(); }; </script> ``` 子组件通过defineExpose暴露对象和方法 ``` <!--子组件名称 child.vue --> <template> <div class="itxst"> {{ state.title }} </div> </template> <script setup> import { ref, reactive } from "vue"; //定义一个变量 const state = reactive({ title: "www.itxst.com", }); //定义一个方法 const play = () => { state.title = "你调用了子组件的方法"; }; //暴露state和play方法 defineExpose({ state, play, }); </script> ``` ### 选项式API 父组件： ``` <!-- 父组件 app.vue --> <template> <div class="itxst"> <!-- 使用 ref 命令 --> <child ref="childComp"/> <button @click="onClick">点击试一试</button> </div> </template> <script > import child from "./child.vue"; export default { name: "app", //注册组件 components: { child, }, methods: { onClick: function () { //获取到 子组件的 数据 let msg = this.$refs.childComp.message; //执行了子组件的 play方法 this.$refs.childComp.play(); }, }, }; </script> ``` 子组件： ``` <!-- 子组件 child.vue --> <template> <div class="itxst"> {{ title }} </div> </template> <script> //选项式默认当前实例是全部暴露 export default { name: "demo", //默认全部暴露 也可以通过expose控制那些需要暴露 //expose: ['play'], data() { return { title: "www.itxst.com", }; }, methods: { play: function () { this.title = "你调用了子组件的方法"; }, }, }; </script> ``` 原文：https://blog.csdn.net/weixin_42252416/article/details/128001894