vue|props的常见和不常见的几种使用方法前端|开发语言|javascript

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

文章图片

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 (短横线分隔命名) 命名；

文章图片

非Prop的Attribute
什么是非Prop的Attribute呢？当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为非Prop的 Attribute；
常见的包括class、style、id属性等；
Attribute继承当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中：

文章图片

如果我们不希望组件的根元素继承attribute，可以在组件中设置 inheritAttrs: false：禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素；
我们可以通过 $attrs来访问所有的非props的attribute

文章图片

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