Vue 组件详解之数据验证

一、camelCased（驼峰式命名）与 kebab--case（短横线命名）

• 在 html 中渲染组件时不可以使用 camelCased（驼峰式命名）。因为在 html 中 myComponent 和 mycomponent 是一致的（除非被双引号包裹），所以在组件的 html 中必须使用 kebab--case（短横线命名）。
• 在组件中，父组件给子组件传递数据必须用短横线命名。
• 在组件的 template 中，必须使用驼峰式命名；若为短横线命名方式，则会直接报错。
• 在组件的 data 中，用 this.xxx 引用时，只能使用驼峰式命名；若为短横线的命名方式，则会报错。

二、数据验证

数据验证主要是对 props 传递进来的数据进行类型的验证，并可以对其设定一个选项，如设置默认值或特定的数据类型。

可验证的 type 类型包括：

• String
• Number
• Boolean
• Object
• Array
• Function

数据验证示例：