学习目标：今天我们来学习一下vue3中的defineExpose

在 Vue 3 中，父组件获取子组件的 DOM 元素以及将子组件的方法暴露给父组件使用，主要依赖于 ref 和 defineExpose。这里我们来列举一下在项目中defineExpose的常用写法，以下是详细说明：

一、父组件获取子组件中的 DOM 元素

方法：使用 ref 获取子组件实例，再访问其 DOM 元素

• 在子组件中给目标 DOM 元素设置 ref

<!-- ChildComponent.vue -->
<template>
  <div ref="childRoot">子组件的根元素</div>
  <p ref="childParagraph">这是一个段落</p>
</template>

<script setup>
import { ref } from 'vue'

// 定义 ref
const childRoot = ref(null)
const childParagraph = ref(null)

// 如果需要暴露给父组件使用，必须通过 defineExpose
defineExpose({
  childRoot,
  childParagraph
})
</script>

• 在父组件中使用 ref 获取子组件实例

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childCompRef" />
    <button @click="accessChildDOM">访问子组件 DOM</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childCompRef = ref(null)

const accessChildDOM = () => {
  // 访问子组件的 DOM 元素
  console.log(childCompRef.value.childRoot)        // <div> 元素
  console.log(childCompRef.value.childParagraph)   // <p> 元素
}
</script>

✅ 注意：必须使用 defineExpose 暴露子组件中的 ref，否则父组件无法访问。

二、将子组件中的方法暴露给父组件使用

方法：使用 defineExpose 暴露方法

• 在子组件中定义方法并暴露

<!-- ChildComponent.vue -->
<script setup>
// 子组件中的方法
const childMethod = () => {
  console.log('这是子组件的方法被调用了')
}

// 暴露给父组件使用
defineExpose({
  childMethod
})
</script>

• 在父组件中通过 ref 调用子组件方法

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childCompRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childCompRef = ref(null)

const callChildMethod = () => {
  childCompRef.value.childMethod() // 调用子组件方法
}
</script>

补充说明

• defineExpose 是 Vue 3 中的宏，用于显式暴露组件内部的属性或方法给父组件。
• 父组件必须等到子组件挂载后才能访问 ref，建议在 onMounted 钩子或事件回调中使用。

不仅可以将子组件的DOM元素以及子组件的内部方法暴露给父组件使用，还可以有更多的玩法，比如暴露子组件的变量、内部某个子组件的实例暴露出去等等，只要通过上述步骤就可以实现，快去试试吧！

这种方式既安全又清晰，是 Vue 3 推荐的父子组件通信方式之一。