Vue3 项目开发流程（三）：组件封装与交互要点全解析

在 Vue3 项目开发进程中，第三方组件库如 Element Plus、Ant Design、Vant 等虽能助力快速搭建应用，但在特定项目场景下，它们可能无法契合需求，或缺乏所需组件。此时，封装自定义组件便成为关键举措。

一、封装组件的显著优势

1. 代码复用性大幅提升：将在多处使用的功能或 UI 模块封装为组件，有效避免重复编写代码，极大地提高开发效率，减少开发时间与人力成本。例如，通用的导航栏组件，可在多个页面中复用，无需在每个页面重复编写导航栏的 HTML、CSS 和 JavaScript 代码。
2. 代码可维护性显著增强：把相似功能整合封装成组件，当需求变更时，仅需在组件内部修改代码。这使得维护工作更加集中和高效，降低因代码分散导致的维护难度和出错概率。比如，若需调整表单组件的样式或验证规则，只需在表单组件内部修改，而不会影响到使用该表单组件的多个页面。
3. 团队协作效率飞跃：封装好的组件可供团队成员共享使用。不同成员可专注于各自负责的组件开发与使用，减少重复劳动，提升整体协作效率，降低沟通成本与开发成本。
4. 用户体验优化升级：借助可复用的 UI 组件封装，能确保不同页面在视觉和交互上保持高度一致性。用户在使用应用时，能够更加流畅自然地进行操作，减少因界面差异带来的困惑与不便，从而显著提升用户体验。

二、封装组件的关键注意事项

1. 数据传递遵循单向数据流原则：在组件传值过程中，务必保证数据单向流动，即仅允许父组件通过 prop 将数据传递给子组件。这有助于维持组件的独立性和可预测性，避免数据混乱与难以调试的问题。例如，父组件传递用户信息给子组件用于展示，子组件不应直接修改父组件传来的用户信息，而是通过特定的回调机制告知父组件数据需要变更。
2. 组件设计着眼复用性：封装组件时应充分考量其复用潜力，尽可能打造通用型组件，使其能够灵活适配多种不同场景。在设计组件接口和功能时，应避免过度定制化，确保组件在不同环境下都能稳定运行并发挥作用。

三、组件传值的实现方式

（一）父传子

在使用组合式API setup语法糖父组件向子组件传值需要使用defineProps函数在子组件中声明props，在Vue3.5以下版本如需声明默认值，需要使用withDefaults 编译器宏。

（二）子传父

无论是子组件想要给父组件传递数据，还是子组件想要修改父组件通过props传递过来的数据，都需要使用defineEmits来声明回调事件。因为组件是单项数据流的原因，所以在子组件是无法直接修改父组件通过props传递过来的数据，这个时候就需要使用defineEmits来声明回调事件，子组件内调用回调事件把值传递给父组件，父组件修改值进而改变子组件内的值。Vue3.3+版本提供了更简洁的语法。

四、自定义 v-model 的运用

（一）单个 v-model

v-model是Vue的一个内置指令，在封装组定义组件时想要使用v-model，需要在子组件内定义emit事件 “update:modelValue”， 然后在想要修改值时调用emit方法“update:modelValue”，父组件通过v-model绑定数据，这样就能实现prop的数据双向绑定。

在Vue3.4+版本可以通过defineModel宏来更简洁的实现。

（二）多个 v-model

当组件内有多个prop需要在子组件仅更改不涉及其他操作，这时候可以使用数据双向绑定来操作。在子组件内定义emit的事件前添加 “update:”前缀， 然后在想要修改值时调用emit方法“update:prop”，父组件通过v-model:prop绑定数据，这样就能实现prop的数据双向绑定。

Vue3.4以前版本

Vue3.4+版本

五、属性暴露

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性或事件。