Vue2（14） Prop学习笔记

Vue2 Prop学习笔记

一、Prop的基本概念

Prop是Vue组件间通信的一种方式，它允许父组件向子组件传递数据。Prop是子组件自身定义的一个属性，父组件在使用子组件时，可以通过该属性向子组件传递数据。

二、Prop的命名与传递

1. 命名规范：

   • 在JavaScript中定义Prop时，通常使用camelCase（驼峰命名法）。
   • 但在HTML模板中引用Prop时，由于HTML对大小写不敏感，需要使用kebab-case（短横线分隔命名）。

2. 传递方式：

   • 静态传递：直接给Prop赋予一个静态的值。
   • 动态传递：使用v-bind指令动态地将数据绑定到Prop上。

三、Prop的类型与验证

1. 类型：

   • Prop可以指定为多种类型，包括String、Number、Boolean、Array、Object、Date、Function等。
   • 通过为Prop指定类型，Vue可以在开发阶段对传递的数据进行类型检查，从而避免类型不匹配导致的错误。

2. 验证：

   • 除了类型检查外，还可以为Prop指定其他验证规则，如是否必填、默认值等。
   • 验证规则可以通过对象的形式进行定义，其中type属性指定类型，required属性指定是否必填，default属性指定默认值。
   • 此外，还可以使用validator函数进行自定义验证。

四、单向数据流

Vue中的Prop是单向绑定的，即父组件的数据变化会传递给子组件，但子组件内部对Prop的修改不会影响到父组件。这是为了防止子组件意外地改变父