vue3ts子调用父组件方法

在Vue 3中，如果子组件需要调用父组件的方法，你可以使用`defineExpose`来导出父组件需要调用的方法。首先，在子组件的`<script setup>`中定义需要调用的方法，例如`login`方法。然后，使用`defineExpose`将该方法导出，以便在父组件中使用。例如：

<script setup lang="ts">
  function login() {
    console.log('111')
  }
  defineExpose({ login })
</script>

在父组件中，你需要先导入子组件的声明，并与`InstanceType`进行联合使用，以获得代码提示和避免类型错误。例如：

import ChildComponent, { IClearExposed } from './ChildComponent.vue'

const childComponent = ref<null | InstanceType<typeof ChildComponent> & IClearExposed>(null)

这样，你就可以通过`childComponent.value.login()`来调用子组件的`login`方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [关于Vue3+ts父组件调用子组件方法](https://blog.csdn.net/xuefeng11111/article/details/123117807)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3中ts父组件调用子组件的方法](https://blog.csdn.net/weixin_59017683/article/details/131184921)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]