vue|props的常见和不常见的几种使用方法

props有两种常见的方法
方式一:
字符串数组
数组中的字符串就是attribute的名称;
方式二:
对象类型:
对象类型 可以指定attribute名称的同时,指定他需要传递的类型,是否是必须的,默认值等等;
vue|props的常见和不常见的几种使用方法
文章图片

props的对象用法

props:{ // 指定类型 title:String, // 指定类型 同时指定是否必选,默认值 content:{ type: String, require:true, // 必传 default:"默认值" }

props的类型可以有哪些?
String Number Boolean Array Object Date Function Symbol

对象类型的其他写法
// 基础类型检查 null 和 undefined 会通过任何类型的检查 prop:[String,Number] // 带有默认值的对象 propE:{ type:Object, default(){ return { message:"hello" } } } // 自定义验证函数 propF:{ validator(value){ // 这个值必须匹配下列字符串之中的一个 return ["success","warning","danger"],includes(value)// 具有默认值的函数 propG:{ type:Function, // 与对象的默认值不同,这不是一个工厂函数这是一个用作默认值的函数 default(){ return 'default function' } }

prop的大小写命名
【vue|props的常见和不常见的几种使用方法】Prop 的大小写命名(camelCase vs kebab-case)
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符;
这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短 横线分隔命名) 命名;
vue|props的常见和不常见的几种使用方法
文章图片

非Prop的Attribute
什么是非Prop的Attribute呢? 当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为 非Prop的 Attribute;
常见的包括class、style、id属性等;
Attribute继承 当组件有单个根节点时,非Prop的Attribute将自动添加到根节点的Attribute中:
vue|props的常见和不常见的几种使用方法
文章图片

如果我们不希望组件的根元素继承attribute,可以在组件中设置 inheritAttrs: false: 禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素;
我们可以通过 $attrs来访问所有的 非props的attribute
vue|props的常见和不常见的几种使用方法
文章图片

多个根节点的attribute
多个根节点的attribute如果没有显示的绑定,那么会报警告,我们必须手动的指定要绑定到哪一个属性上:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hhUaBwP9-1643207915974)(img/image-20220126223714440.png)]

    推荐阅读