Vue组件的命名Prop命名约定

作者：前端小智 2023-08-07 08:52:53开发 前端 在编程中，有两个极具挑战性的约定任务：缓存失效和命名事物。今天，命名我们将深入探讨后者，约定探索为Vue组件命名Props的命名艺术。在给 Props 命名时，约定遵循已有的命名变量命名惯例是非常重要的。例如，约定使用小驼峰命名法（IsEnabled）并保持名称简短（不超过30个字符）。命名

AICube 开放GPT-4给大家使用以及AI工具助手，约定可以简化大家生图的命名的prompt

在编程中，有两个极具挑战性的约定任务：缓存失效和命名事物。今天，命名我们将深入探讨后者，约定探索为Vue组件命名props的命名艺术。

在给 props 命名时，遵循已有的变量命名惯例是非常重要的。例如，使用小驼峰命名法（isEnabled）并保持名称简短（不超过30个字符）。

然而，Vue有自己的一套最佳实践，我们应该遵循。让我们根据我在使用Vue的经验谈谈一些技巧。

1、内容感知命名

重要的是最大限度地利用变量名传达信息，以减少混淆并使组件的浏览更加容易。

对于数组，选择使用复数名词作为变量名，例如 items 。这个选择立即表明该变量代表一组相关元素的集合。

处理数字时，可以使用前缀如 num 或后缀如 count 和 index 来表示数值。例如， numItems ， itemCount 和 itemIndex 可以清楚地表明变量的数值属性。

在处理对象时，请使用适当的单数名词，例如 item 。

对于布尔值，请使用描述性前缀如 is 、 can 和 has 来传达视觉或行为上的变化：

is 适用于表示视觉或行为状态，例如 isVisible ， isEnabled 或 isActive 。

can 表示行为变化或条件性的视觉变化。考虑使用 canToggle 或 canExpand 这样的属性名称来清晰地表达组件的能力。

has 表示UI元素的存在。使用前缀如 hasCancelButton 或 hasHeader 来表示特定的UI元素是否存在或可见。

2、描述性命名

Props 应该描述组件本身，侧重于它的功能而不是为什么要这样做。避免以当前用户或环境命名 props。

例如：

考虑使用 hasSubmitButton ，而不是 hasSubmitPermission。

<MyForm hasSubmitButtnotallow="user.canSubmit" />

不要选择 isMobileScreen ，而是选择 isCompactLayout 。

<MyForm isCompactLayout="browser.isMobileScreen" />

避免将 props  命名为子组件。如果这些 props  是用来传递给子组件的，请使用描述组件本身的名称。

• 使用 <MyList @notallow="…" /> 代替 <MyList @notallow="…" />
• 选择 isLoadingComments 而不是 areCommentsLoading

描述子组件的存在可能会引起误解。如果目标是为了为图标创建更多的空间而不是切换其存在，考虑使用 isSpacious 而不是 hasIcon 。记住， hasIcon 回答的是为什么，而不是什么。

3、事件处理程序属性

在表示事件处理程序的属性名称之前添加on （例如，onSelect，onClick）

使用 handle 前缀来定义处理函数。

<MyComp @notallow="handleClick" />

避免在自定义事件中使用内置的事件处理程序属性名称。如果原生的焦点/点击事件不相关，请使用自定义名称，例如 onSelect ，而不是 onFocus 或 onClick 。

按照这些准则，我们可以为Vue应用程序建立一致且有意义的 prop 命名约定。周到的 prop 名称有助于提高代码的可读性和可维护性，使你和团队更容易有效地合作。

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

责任编辑：姜华 来源： 大迁世界 Vue组件Props 命名

(责任编辑：热点)