深入了解Vue3组件 | 组件的Props
目录
此处分为以下5个部分讲
属性的类型
在组件配置项props中，可以以字符串数组形式列出的组件的属性
举例🌰：添加一个自定义属性author，并在props中列出来
也可以在props中，以对象的形式为每个属性指定值类型
举例🌰：将author的类型设置为字符串
指定属性类型的好处
- 相当于为组件提供了文档
- 当输入错误类型时，浏览器的控制台会给予提示
静态属性和动态属性
传递静态属性
如上例，在使用组件时，直接在组件上添加属性author，并可以为属性传递一个静态属性值LBJ
传递动态属性
在使用组件时，可以使用v-bind为属性动态赋值
可以赋值为一个数字、布尔值、数组、对象等
举例🌰：为组件添加一个动态属性like，值为数字
可以使用不带参数的 v-bind，将一个对象的所有 property 都作为组件的 prop 传入
举例🌰：在自定义组件my-component上使用v-bind，不带参数
可以看到最终的结果，传入的对象被展开了
单项数据流
父级组件的更新 prop 会向下流动到子组件，反之则不行，Vue会发出警告
举例🌰：在子组件中修改title的数据
可以看到报错了：Vue warn]: Attempting to mutate prop “title”. Props are readonly.
这其实时好的，防止子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解
当父级组件的prop值发生变更，子组件中所有的 prop 都将会刷新为最新的值
如果真的想在子组件内部改变 prop，官方提供了两种可能的情形，及对应的做法
情形1：这个 prop 传递一个初始值作为子组件的一个本地数据
推荐做法：在子组件的data中声明一个属性，值为prop的值
举例🌰：父级组件传递initialCounter，子组件声明另外一个变量，将initialCounter的值赋值过去
以后如果要修改，就直接修改counter
情形2：这个 prop 传递一个初始值需要在子组件中进行计算或转换
推荐做法：在子组件中定义一个对应的计算属性
举例🌰：父组件传递size，子组件通过计算属性重新计算出一个值normalizedSize
特别注意，对于一个数组或对象类型的 prop，在子组件中变更这个对象或数组本身，将会影响到父组件
属性验证
属性验证有利于给使用组件的人提供帮助
属性验证方式
指定验证的方式，只要给组件的配置项props提供一个特定对象，对象的属性名即使组件prop，值为对应的验证
举例🌰：以下多种验证方式
propA: Number表示propA的值类型是Number
propB: [String, Number]表示propB的值类型是String或Number
propC: {type: String,required: true} 表示类型为String且必填
除此之外以上展示的，还有其他的验证方式：
propD: {type: Number,default: 1}表示类型为Number且有默认值
propE: {type: Object,default() {return {message: ‘hello’ }}}表示默认值为对象，注意：对象或数组默认值必须从一个函数获取
propF: {validator(value) {return [‘success’,’warning’, ‘danger’].includes(value)}}表示自定义验证函数
propG:{type:Function,default(){return ‘xxx’ }}表示类型为函数且带默认值
开发环境中，当 prop 验证失败时，Vue会发出警告
注意：属性验证会在组件实例创建之前进行验证，因此所有的组件实例的property如data、computed 等， 在 default 或 validator 函数中是不可用的
type的类型
可以是下列原生构造函数中的一个：String、Number、Boolean、Array、Object、Date、Function、Symbol
也可以是一个自定义的构造函数
举例🌰：使用自定义构造函数作为类型
Prop的大小写命名
HTML中的attribute名是大小写不敏感，所以浏览器会把所有大写字符解释为小写
因此，在组件注册时，prop名使用camelCase (驼峰命名法)，prop的名需要使用与HTML中等价的写法
举例🌰：使用在注册组件时，prop名是camelCase
如果在字符串模板使用，则没有这个限制，既可以使用camelCase也可以使用kebab-case
小结
为了方便，我将注册Props相关内容汇总为一图
为了方便批量下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map
