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

默语

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

3K1

文章被收录于专栏：JAVAJAVA

详细分析 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>

总结

通过本文的介绍，你应该已经对 Vue3 中的 defineExpose 有了全面的了解。它提供了一种灵活的方式，让父组件能够安全访问子组件的内部逻辑和状态，极大提高了组件间的协作性和可扩展性。在实际项目中，合理使用 defineExpose 可以让你的代码更加清晰和模块化。

参考资料

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

函数

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

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

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

摘要

引言

正文

1. 什么是 `defineExpose`？

2. 基础用法和 Demo

2.1 基础用法：暴露函数

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

3.1 暴露函数

3.2 导入子组件的数据

3.3 更新子表单数据

总结

参考资料

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

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

摘要

引言

正文

1. 什么是 defineExpose？

2. 基础用法和 Demo

2.1 基础用法：暴露函数

3. 实战：深度使用 defineExpose

3.1 暴露函数

3.2 导入子组件的数据

3.3 更新子表单数据

总结

参考资料

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

1. 什么是 `defineExpose`？

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