VUE之组件（Props特性深析）

创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 prop 的由来。
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中
注意：一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop

目录

1、Props命名风格
2、Props动态和静态
3、组件参数Props校验
4、非Props特性与Props特性
5、$attrs和inheritAttrs继承属性

Prop命名风格

①PascalCase首字母大写命名即大驼峰法
②camelCase 小驼峰命名法
③kebab-case 短横线分隔命名法

注意：

HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

Prop 的命名风格，案例


①在 JS中是驼峰法命名；②在 HTML 中是 kebab-case 短横线分隔命名法

Prop 动态和静态

（1）静态Prop
如下所示，你已经知道了可以像这样给 prop 传入一个静态的值

2）动态Prop
prop 可以通过 v-bind 动态赋值，对上述案例稍作修改

props传值格式

这里介绍下props传值时的细节点
props传值格式：props传值时，如果属性添加了:则会将后面的属性值理解为表单式，否则将会理解为字符串

组件参数props校验

目前为止，我们只看到了以字符串数组形式列出的 prop，如下所示
Prop类型：
如果希望每个 prop 都有指定的值类型，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型，如下所示：

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告
组件参数校验：
父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。

案例：