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

默语

发布于 2025-05-21 07:35:28

25400

代码可运行

文章被收录于专栏：JAVAJAVA

运行总次数：0

代码可运行

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

摘要

defineExpose 是 Vue3 中提供的一项 Composition API，用于暴露组件内部的数据或方法给外部使用。这一特性在开发复杂组件时尤为重要，可以使组件间的交互更灵活，同时保持模块化和封装性。本文将从基础概念、代码示例到实际应用，手把手带你深入理解 defineExpose 的功能及其在项目中的实战场景。

引言

在 Vue3 中，开发者使用 <script setup> 可以更简洁地编写组件。然而，默认情况下，<script setup> 定义的变量、函数和数据是无法直接被父组件访问的。如果需要让父组件访问子组件的某些方法或数据，就需要用到 defineExpose。

本文将带你了解：

defineExpose 的基本原理
如何通过示例掌握其用法
实际场景中如何灵活使用 defineExpose

正文

1. 什么是 `defineExpose`？

defineExpose 是 Vue3 的一个工具函数，它允许开发者显式地暴露子组件内部的方法或数据供父组件使用。

默认情况下，<script setup> 中定义的变量是私有的，无法从父组件访问。
使用 defineExpose 可以打破这一限制，将需要暴露的内容通过指定的接口开放给父组件。

核心语法：

defineExpose({
  exposedMethodOrDataName
});

2. 基础用法和 Demo

2.1 基础用法：暴露函数

子组件代码：

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

const message = ref('Hello from Child Component');

// 定义一个供父组件调用的函数
function childMethod() {
  console.log('子组件方法被调用！');
}

// 使用 defineExpose 暴露 message 和 childMethod
defineExpose({
  message,
  childMethod
});
</script>

父组件代码：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null);

    function callChildMethod() {
      // 通过 ref 调用子组件暴露的方法
      console.log(childRef.value.message); // 输出子组件的 message
      childRef.value.childMethod(); // 调用子组件的函数
    }

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

运行结果： 点击按钮后，浏览器控制台会输出：

Hello from Child Component
子组件方法被调用！

3. 实战：深度使用 `defineExpose`

3.1 暴露函数

在子组件中暴露一个操作方法，比如清空表单数据：

子组件代码：

<template>
  <form>
    <input v-model="formData.name" placeholder="请输入姓名" />
    <input v-model="formData.email" placeholder="请输入邮箱" />
  </form>
</template>

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

const formData = reactive({
  name: '',
  email: ''
});

function resetForm() {
  formData.name = '';
  formData.email = '';
}

defineExpose({
  resetForm
});
</script>

父组件代码：

<template>
  <div>
    <ChildComponent ref="formRef" />
    <button @click="clearForm">清空表单</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const formRef = ref(null);

    function clearForm() {
      formRef.value.resetForm(); // 调用子组件的 resetForm 方法
    }

    return {
      formRef,
      clearForm
    };
  }
};
</script>

3.2 导入子组件的数据

在某些情况下，父组件可能需要直接访问子组件的状态数据（例如进度条的状态）：

子组件代码：

<template>
  <div>当前进度：{{ progress }}%</div>
</template>

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

const progress = ref(50);

defineExpose({
  progress
});
</script>

父组件代码：

<template>
  <div>
    <ChildComponent ref="progressRef" />
    <button @click="logProgress">查看进度</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const progressRef = ref(null);

    function logProgress() {
      console.log(`子组件进度：${progressRef.value.progress}%`);
    }

    return {
      progressRef,
      logProgress
    };
  }
};
</script>

运行结果： 点击按钮后，控制台显示：

子组件进度：50%

3.3 更新子表单数据

假设父组件需要向子组件动态传递表单数据，同时允许子组件暴露更新表单的方法：

子组件代码：

<template>
  <div>
    <p>表单数据：{{ formData }}</p>
  </div>
</template>

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

const formData = reactive({
  username: '',
  password: ''
});

function updateFormData(newData) {
  Object.assign(formData, newData);
}

defineExpose({
  formData,
  updateFormData
});
</script>

父组件代码：

<template>
  <div>
    <ChildComponent ref="formRef" />
    <button @click="updateForm">更新表单</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const formRef = ref(null);

    function updateForm() {
      formRef.value.updateFormData({ username: '默语', password: '123456' });
    }

    return {
      formRef,
      updateForm
    };
  }
};
</script>