异常教程

Vue3 expose() 函数（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Vue3 的生态体系中，组件通信一直是开发者关注的核心话题。随着 Vue3 引入 Composition API 和 setup() 语法糖，传统的父子组件通信方式发生了微妙变化。特别是在使用 <script setup> 语法时，开发者会发现一些原本通过 $emit 和 Props 实现的场景需要新的解决方案。此时，Vue3 expose() 函数便成为连接组件间复杂交互的关键工具。本文将通过循序渐进的方式，结合实际案例，深入解析 expose() 的原理、用法及最佳实践，帮助读者掌握这一实用技能。

一、组件通信的演变与痛点

在 Vue2 中，父子组件通信主要依赖 Props 和 Events：父组件通过 Props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。然而，在 Vue3 的 Composition API 中，当使用 setup() 或 <script setup> 语法时，这种模式遇到了新的挑战。例如：

  1. 无法直接访问子组件的内部数据：如果子组件需要暴露某个计算属性或方法，父组件无法像 Vue2 那样直接通过 $children 获取。
  2. 事件耦合度高：频繁使用 $emit 可能导致父子组件间事件名称冗余，降低代码可维护性。

此时，expose() 函数应运而生，它提供了一种声明式的暴露机制，允许子组件选择性地将内部数据或方法暴露给父组件，同时保持组件的封装性。

二、expose() 函数的基础用法

1. 基本语法与作用

expose() 是 Vue3 提供的一个函数，用于在子组件中显式指定需要暴露给外部（如父组件）的属性或方法。其语法如下：

// 在子组件的 setup() 函数中调用  
expose({ key1: value1, key2: value2 });

或通过数组形式指定：

expose([value1, value2]);

注意：若未调用 expose()，子组件默认仅暴露通过 ref 或 this 直接定义的属性（仅限 Options API）。在 Composition API 中，必须显式调用 expose() 才能暴露数据。

2. 第一个案例：暴露基础数据

假设有一个子组件 ChildComponent.vue，需要向父组件暴露一个计数器变量 count：

<!-- ChildComponent.vue -->  
<script setup>  
import { ref } from 'vue';  
const count = ref(0);  
// 暴露 count 给父组件  
expose({ count });  
</script>

父组件通过 ref 获取子组件实例后，即可访问 count：

<!-- ParentComponent.vue -->  
<template>  
  <ChildComponent ref="childRef" />  
  <button @click="incrementChildCount">+1</button>  
</template>  

<script setup>  
import { ref } from 'vue';  
const childRef = ref(null);  

const incrementChildCount = () => {  
  childRef.value.count.value += 1;  
};  
</script>

关键点：

  • 子组件通过 expose() 明确暴露 count，父组件通过 ref 获取后直接操作。
  • 注意 count 是响应式引用，需通过 .value 访问内部值。

三、expose() 的核心场景与进阶用法

1. 暴露方法与计算属性

除了数据，子组件还可暴露方法或计算属性。例如，子组件提供一个 resetCount() 方法：

<!-- ChildComponent.vue -->  
<script setup>  
import { ref } from 'vue';  
const count = ref(0);  
const resetCount = () => {  
  count.value = 0;  
};  
expose({ count, resetCount }); // 同时暴露数据和方法  
</script>

父组件可直接调用该方法：

childRef.value.resetCount();

2. 动态暴露与条件暴露

expose() 的参数可以是动态表达式，例如根据某个条件决定暴露的内容：

const isExposed = ref(true);  
expose(isExposed.value ? { count } : {});

但需注意，动态暴露需配合 watch 或 effect 监听变化，否则可能因 Vue 的响应式机制导致暴露内容未及时更新。

3. 与第三方库的交互

在需要与第三方库（如 D3.js、Three.js）交互的场景中，expose() 可用于暴露库的实例或元素。例如，子组件渲染一个图表并暴露其 Canvas 元素：

<!-- ChartComponent.vue -->  
<template>  
  <canvas ref="chartCanvas" />  
</template>  

<script setup>  
import { ref } from 'vue';  
const chartCanvas = ref(null);  
// 暴露 canvas 元素给父组件  
expose({ chartCanvas });  
</script>

父组件可通过 ref 获取 Canvas 元素并操作：

const canvasElement = childRef.value.chartCanvas.value;

四、expose() 的使用注意事项

1. 封装性与安全性

  • 避免过度暴露：仅暴露父组件真正需要的内容，避免破坏组件的封装性。
  • 权限控制：敏感数据或核心逻辑应避免暴露，可通过暴露接口替代直接暴露数据。

2. 与 Options API 的兼容性

在 Options API 中，expose() 可通过 defineExpose 宏实现：

// Options API 写法  
export default {  
  data() {  
    return { count: 0 };  
  },  
  expose: ['count'], // 等同于 expose({ count })  
};

3. 在 <script setup> 中的使用

当使用 <script setup> 语法时，expose() 直接写在脚本中即可，无需额外声明：

<script setup>  
import { ref } from 'vue';  
const count = ref(0);  
expose({ count });  
</script>

五、复杂场景实战：自定义表单组件

1. 需求背景

假设需要创建一个自定义表单组件 CustomForm.vue，要求：

  1. 父组件能直接获取表单的验证状态。
  2. 父组件能触发表单的提交操作。

2. 子组件实现

<!-- CustomForm.vue -->  
<script setup>  
import { ref } from 'vue';  

const form = ref({  
  name: '',  
  email: ''  
});  

const validationState = ref(true);  

const submitForm = () => {  
  // 验证逻辑  
  validationState.value = validateForm(form.value);  
};  

// 暴露验证状态和提交方法  
expose({  
  validationState,  
  submitForm  
});  
</script>  

<template>  
  <form @submit.prevent="submitForm">  
    <!-- 表单输入框 -->  
  </form>  
</template>

3. 父组件调用

<!-- ParentComponent.vue -->  
<template>  
  <CustomForm ref="formRef" />  
  <button @click="handleParentSubmit">提交</button>  
</template>  

<script setup>  
import { ref } from 'vue';  
const formRef = ref(null);  

const handleParentSubmit = () => {  
  formRef.value.submitForm();  
  if (formRef.value.validationState.value) {  
    console.log('表单验证通过！');  
  }  
};  
</script>

六、对比其他通信方式的优劣

1. 与 Props/Events 的对比

场景Props/Eventsexpose()
数据流向父→子（Props）或子→父（Events）子→父（直接访问）
耦合度较高（依赖事件名和 Props 名称）较低（通过对象属性访问）
适用性简单单向通信复杂交互或需要直接操作子组件时

2. 与 Provide/Inject 的对比

Provide/Inject 适用于跨层级通信，而 expose() 专为父子组件设计，无需遍历中间组件。

七、常见问题解答

Q1：为什么在 <script setup> 中必须使用 expose()？

A：在 Composition API 中，默认情况下子组件不会暴露任何内容。expose() 是 Vue3 提供的显式接口，确保开发者有意识地控制暴露内容，避免意外暴露敏感数据。

Q2：如何同时暴露 Props 和计算属性？

A：可通过 expose() 组合使用：

const props = defineProps({ /* Props 定义 */ });  
const computedValue = computed(() => ...);  
expose({ props, computedValue });

结论

Vue3 expose() 函数是组件通信中不可或缺的工具，它通过声明式的方式实现了父子组件间灵活且安全的交互。无论是暴露基础数据、方法，还是与第三方库协作，开发者都能通过 expose() 保持代码的清晰与可维护性。

通过本文的讲解，读者应能掌握 expose() 的核心用法，并在实际项目中解决复杂通信场景。建议在开发中遵循“最小暴露原则”，仅暴露必要的接口，同时结合 Props 和 Events 实现更优雅的架构设计。

掌握 Vue3 expose() 函数，你将解锁 Vue3 组件通信的更多可能性，为构建复杂应用奠定坚实基础。

最新发布

查看更多文章