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)]
推荐阅读
- Java|学生成绩管理系统(java简略版)
- 修复错误(Uncaught SyntaxError: Unexpected token)
- TinyMCE弹出添加媒体按钮
- $(this).parent().find()无法正常工作
- 解决WordPress子主题上与父主题的javascript冲突
- #私藏项目实操分享# 什么是 SAP HANA XS JavaScript
- jQuery中WordPress模板目录的路径()
- 程序人生|写了这么久Java项目,是否还记得你的第一行Java代码
- JavaSE系列详解|Java8新特性Stream流的概念和使用【详解】