详细分析Vue3中的defineExpose（附Demo）

前言

其基本知识可参考官网：Vue3中的defineExpose

1. 基本知识

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法

这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法

在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose

示例Demo如下：

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

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

2. Demo

1. 父组件渲染子组件 Child 并通过 ref 获取子组件的实例。
2. 子组件中的 count 和 increment 方法通过 defineExpose 暴露出来。
3. 当点击父组件中的 “Access Child Methods” 按钮时，父组件可以访问并调用子组件的 count 和 increment

子组件：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);

function increment() {
  count.value++;
}

// 使用 defineExpose 来暴露 count 和 increment
defineExpose({
  count,
  increment,
});
</script>

父组件：

<template>
  <div>
    <Child ref="childRef" />
    <button @click="accessChild">Access Child Methods</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);

function accessChild() {
  if (childRef.value) {
    console.log('Current count:', childRef.value.count);
    childRef.value.increment();
    console.log('Count after increment:', childRef.value.count);
  }
}

onMounted(() => {
  if (childRef.value) {
    console.log('Child component mounted, initial count:', childRef.value.count);
  }
});
</script>

总的来说：

• defineExpose 用于在 <script setup> 中显式暴露组件内部状态和方法
• 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
• 使用 defineExpose 可以让组件更加模块化和可控，只有显式暴露的部分才能被外部访问，增强了封装性和安全性

这个功能在组件之间需要进行复杂交互时特别有用，尤其是在大型项目中，能够显著提升代码的可读性和可维护性

3. 实战

也可通过函数进行暴露

<template>
  <div>
    <button @click="open">Fetch Data</button>
    <div v-if="detailLoading">Loading...</div>
    <div v-else>
      <div v-for="item in detailData.attachment1" :key="item">{{ item }}</div>
      <div v-for="item in detailData.attachment2" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DangerousWorkApi from '@/api/DangerousWorkApi'

const detailLoading = ref(false)
const detailData = ref({})
const props = defineProps(['id'])
const queryId = 'some-query-id'

const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await DangerousWorkApi.getDangerousWork(props.id || queryId)
    const attachment1 = detailData.value.attachment1;
    const attachment2 = detailData.value.attachment2;
    detailData.value.attachment1 = attachment1.split(",");
    detailData.value.attachment2 = attachment2.split(",");
  } finally {
    detailLoading.value = false
  }
}

defineExpose({ open: getInfo })

onMounted(() => {
  getInfo()
})
</script>