Vue组件的Prop命名约定

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

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

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

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

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

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

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

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

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

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

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

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

例如：

考虑使用 hasSubmitButton ，而不是 hasSubmitPermission

代码语言：javascript复制

<MyForm hasSubmitButton="user.canSubmit" />

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

代码语言：javascript复制

<MyForm isCompactLayout="browser.isMobileScreen" />

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

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

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

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

代码语言：javascript复制

<MyComp @onClick="handleClick" />

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

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

0 人点赞