vue3中使用defineExpose用来暴露子组件的方法

在Vue 3中，可以使用defineExpose来暴露子组件的方法。在父组件中，需要先通过ref来获取子组件的实例，然后才能调用子组件的方法。首先，在子组件的setup选项中，使用defineExpose来定义需要暴露的方法。例如，在子组件Comp.vue中，可以使用defineExpose({ show })来暴露show方法。然后，在父组件中使用ref来获取子组件的实例，并通过调用实例的方法来调用子组件的show方法。具体代码如下所示：

// 子组件Comp.vue
<script setup>
import { ref, defineExpose } from 'vue'
const show = () => {
  alert("我是子组件，我的show方法被调用了")
}
// 主动暴露childMethod方法
defineExpose({ show })
</script>

<template>
  <div>我是子组件</div>
</template>

// 父组件app.vue
<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const showComp = ref(null) // 这个时候获取了子组件Comp
const childShow = () => {
  showComp.value.show() // 调用子组件的show方法
}
</script>

<template>
  <button @click='childShow'>点击调用子组件方法</button>
  <Comp ref='showComp'></Comp>
</template>

以上是一个示例代码，可以在父组件中通过点击按钮调用子组件的show方法。在子组件的setup选项中，使用defineExpose来暴露show方法。然后在父组件中使用ref来获取子组件的实例，并通过调用实例的方法来调用子组件的show方法。这样就实现了在Vue 3中使用defineExpose来暴露子组件的方法。 <span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [vue3父组件如何调用子组件的方法？需要defineExpose方法主动暴露方法](https://blog.csdn.net/weixin_41791737/article/details/123280412)[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_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue 父组件中调用子组件函数的方法](https://download.csdn.net/download/weixin_38659159/12941063)[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_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]