defineExpose的使用（父组件获取子组件的实例）

最新推荐文章于 2025-06-19 20:49:22 发布

原创最新推荐文章于 2025-06-19 20:49:22 发布 · 770 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

本文介绍了在Vue3的<scriptsetup>特性下，如何通过defineExpose让父组件能够访问并操作在子组件中声明的<a>属性和loadList函数。这适用于场景如在父组件集中管理子组件的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方解释：

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

通俗的讲：父组件可以通过defineExpose 获取子组件的实例

应用场景：当子组件的按钮都在父组件，需要统一在父组件点击按钮后操作就可以使用这种方法（个人使用场景推荐）；

例子：

//子组件——————defineExpose出组件中的a变量和loadList 函数，父组件就可以直接通过实例使用
<script setup lang="ts">
import { ref } from 'vue'

const a = ref(2)
// loadList 函数
const loadList = (item: any) => {
  console.log(item)
}

defineExpose({
  a,
  loadList
})
</script>
<template>
  <div>child</div>
</template>

//父组件————在引入的子组件身上定义ref="childeRef"
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ChildComponent from '@/views/articles/ChildComponent.vue'
const childeRef = ref()
onMounted(() => {
  childeRef.value.loadList([{ id: 1, name: '22' }]) // 调用子组件函数
})
</script>
<template>
  <ChildComponent ref="childeRef"></ChildComponent>
</template>