vue3如何使用子组件的方法

在Vue3中，父组件调用子组件的方法有两种方式：使用组合式API和选项式API。

使用组合式API的方法是通过expose和ref来实现的。首先，在父组件的setup函数中导入子组件，并使用ref指令关联子组件实例，如`const childComp = ref(null);`。然后，可以通过访问childComp.value来获取子组件的数据和方法，例如`let msg = childComp.value.state.title;`可以获取到子组件的title数据，`childComp.value.play();`可以调用子组件的play方法。最后，可以在父组件的模板中使用@click等事件触发父组件中的方法，从而实现调用子组件的方法。

选项式API的方法是通过使用$refs来实现的。首先，在父组件中使用ref命令关联子组件，例如`<child ref="childComp"/>`。然后，在父组件的methods中定义一个方法，通过this.$refs.childComp来获取子组件的实例，从而可以访问子组件的数据和方法。例如`let msg = this.$refs.childComp.message;`可以获取到子组件的message数据，`this.$refs.childComp.play();`可以执行子组件的play方法。最后，在父组件的模板中使用@click等事件触发父组件中的方法，从而实现调用子组件的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3父组件调用子组件的方法](https://blog.csdn.net/weixin_42252416/article/details/128001894)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]