Vue 2.6 和即将推出的 Vue 3.0 中的完美包装组件

您想构建一个看起来像青少年卧室的代码库，还是想构建一个看起来像宜家直接出品的代码库。

干净、可预测和快速的代码与不一致、有缺陷且需要几个世纪才能添加功能的代码之间的差异可以归结为几个组成部分。

我们今天讨论的组件是设计系统组件，主要是包装器组件。作为一名 Vue/前端开发者，你需要与你的设计师伙伴合作，确保构建的设计系统简洁且“可继承”。

可继承？是的——可继承，也就是说，设计模式本身就是一个不断演变的设计，而不是那些看起来像属于不同项目的组件——这正是我们构建https://flowyse.com 的方式。

好了——废话少说，我们如何构建一个强大的包装器组件结构呢？让我们在示例中使用一个输入字段和一个按钮。

步骤1：

解决方案架构问题：

• 输入字段有哪些状态？
• 数据在哪里获取和发送
• 它会维护自己的数据层还是从父级吸收数据
• 我是否直接将所有输入字段同步到 Vuex 这样的中央管理存储？

第 2 步：
答案

• 悬停、聚焦、错误
• 父组件
• 不会，数据层来自父级（在这种情况下，您可以按照自己的方式进行）
• 不，我们正在将所有数据同步到输入的父级，现在已经完成了，让我们看一个非常简单的输入组件。
• 我们有一个根标签包裹输入组件
• 我们将输入组件绑定到 $attrs（很快会详细介绍）
• 我们听“$listeners”（不管它是什么）
• 最后，我们监听“输入”的变化并向父级发出“更改”事件

VueJS 知道包装组件是每个组件驱动框架的理想选择，也是自然而然的。“prop”命题的一部分是，从父级传递下来的属性或“指令”，如果子级没有识别为 props，就会自动附加到子级的根组件上……这让人困惑。

想象一下将问候语传递到输入包装器中，如果问候语未注册为 prop - 它将作为字段添加到输入字段的包装器中，通过将inheritAttrs设置为false，我们可以阻止这种情况，而是覆盖它并将所有元数据直接传递到输入组件中。

这样，您不需要在输入包装器中注册每个道具，但本质上它会自然地通过包装器（正如包装器应该允许的那样）

其次，我们有一个名为 $listeners 的东西——这是 Vue 的好方法，基本上将组件监听的所有事件冒泡到父级，这样你就不需要手动注册每个事件——同样，这是一种创建包装组件的好方法。

包装器的目标本质上是提供一些设计一致性——PS 包装器也应该 100% 负责自定义逻辑，您可以根据需要轻松地向包装器组件添加尽可能多的自定义逻辑，您可以通过将值注册为 prop 来访问输入字段的值。

我们剩下的是一个输入包装器，其模型在创建包装器的组件范围内定义，并且要直接传递给输入组件的属性将按预期进行注册。

这就是整个 Flowyse 项目的构建方式，也是我能够在 5.5 周内完成它的原因之一。

🚨哇哦哇哦——大事发生啦🚨

使用 Vue 3.0，创建基本包装器组件时不需要太多配置

我们的组件使用起来更加简单

注意我们不再有 $listeners 或 inheritAttrs

在 Vue 3.0 中，不再有属性的自动继承，这意味着 $attrs 会自动包含所有与 prop 无关的属性，而无需定义 inheritAttrs: false 。

即使有监听器，v-on 也会直接编译为属性 @enter ，并编译为 on-enter 。只需执行 v-bind="attrs" 即可。

“attrs” 也包括所有未发射的听众，最好的部分是……

v-model 通过执行 v-bind="$attrs" 编译成 model-value 和 on-model-update，因此不再需要模型选项，也不需要像以前那样覆盖本机输入事件