1.1 props
1.Props 定義
組件上 注冊(cè)的一些 自定義屬性
2.Props 作用
向子組件傳遞數(shù)據(jù)
3.特點(diǎn)
- 可以 傳遞 任意數(shù)量 的prop
- 可以 傳遞 任意類(lèi)型 的prop
1.2 props校驗(yàn)
1.思考
組件的props可以亂傳嗎
2.作用
為組件的 prop 指定驗(yàn)證要求酗失，不符合要求授瘦，控制臺(tái)就會(huì)有錯(cuò)誤提示 → 幫助開(kāi)發(fā)者铅忿，快速發(fā)現(xiàn)錯(cuò)誤
3.語(yǔ)法
- 類(lèi)型校驗(yàn)
- 非空校驗(yàn)
- 默認(rèn)值
- 自定義校驗(yàn)
props: {
校驗(yàn)的屬性名：類(lèi)型 // Stirng | Number | Object | Array | Boolean | Function
list:Array, // 表示只校驗(yàn)類(lèi)型部凑，類(lèi)型是數(shù)組即可
say:Function, // 表示只校驗(yàn)類(lèi)型臼氨，類(lèi)型是函數(shù)即可
}
1.3 props校驗(yàn)完整寫(xiě)法
1.語(yǔ)法
props: {
校驗(yàn)的屬性名: {
type: 類(lèi)型, // Number String Boolean ...
required: true, // 是否必填
default: 默認(rèn)值, // 默認(rèn)值
validator (value) {
// 自定義校驗(yàn)邏輯
return 是否通過(guò)校驗(yàn)
}
}
},
2.代碼實(shí)例
<script>
export default {
// 完整寫(xiě)法（類(lèi)型电谣、默認(rèn)值尼酿、非空、自定義校驗(yàn)）
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('傳入的范圍必須是0-100之間')
return false
} else {
return true
}
},
},
},
}
</script>
3.注意
1.default和required一般不同時(shí)寫(xiě)（因?yàn)楫?dāng)時(shí)必填項(xiàng)時(shí)殉挽，肯定是有值的）
2.default后面如果是簡(jiǎn)單類(lèi)型的值丰涉，可以直接寫(xiě)默認(rèn)。如果是復(fù)雜類(lèi)型的值斯碌，則需要以函數(shù)的形式return一個(gè)默認(rèn)值
4.代碼講解
<template>
<div>
<!-- 父?jìng)髯右凰溃褪墙o組件標(biāo)簽，添加屬性 -->
<!-- :str="變量或表達(dá)式"傻唾，變量要在data中定義投慈；str="值"，說(shuō)明這個(gè)值就是一個(gè)字符串 -->
<!-- 注意div中的變量不加this冠骄，script中的變量加this -->
<Son str="hello"
:age="age"
:visible="visible"
:list="list"
:user="user"
:say="say"></Son>
</div>
</template>
data() {
return {
// 父?jìng)髯拥念?lèi)型
age:20,
visible:true,
list:['a', 'b', 'c'],
user:{name:'xx', sex:'男'},
say() {
console.log(123)
},
}
},
<script>
export default {
name:'SonPage',
created() {
this.say() // 調(diào)用接收到的props中的say方法
},
// props寫(xiě)成數(shù)組格式
// props:['str', 'age', 'visible', 'list', 'user', 'say']
// props寫(xiě)成對(duì)象格式伪煤，才可以對(duì)接收的變量進(jìn)行校驗(yàn)
// 1. required:true,表示父組件，必須傳遞這個(gè)值
// 2. type:Stirng | Number | Object | Array | Boolean | Function
// 2.1 type:[String, Number],表示接收的數(shù)據(jù)允許字符串和數(shù)字類(lèi)型
// 3. default:'', 表示傳過(guò)來(lái)的默認(rèn)值
// 3.1 默認(rèn)值如果是對(duì)象或數(shù)據(jù)凛辣，要寫(xiě)成函數(shù)格式抱既，函數(shù)中返回對(duì)象或數(shù)組
props: {
// 鍵:{在這里對(duì)接收的數(shù)據(jù)，進(jìn)行校驗(yàn)}
str:{
required:true // 表示父組件扁誓，必須傳遞str這項(xiàng)數(shù)據(jù)
},
age:{
default:100, // 如果父組件防泵，沒(méi)有傳遞age,則讓age等于100
// type:Number // Number不要加引號(hào)
type:[Number, String] // 傳遞過(guò)來(lái)的數(shù)據(jù)，可以是數(shù)字或字符串
},
visible:{},
list:Array, // 表示只校驗(yàn)類(lèi)型跋理，類(lèi)型是數(shù)組即可
user:{
default: () => {
return {} // 對(duì)于默認(rèn)值是數(shù)組或?qū)ο蟮那闆r择克，默認(rèn)值要寫(xiě)一個(gè)函數(shù)，函數(shù)中返回默認(rèn)值
}
},
say:Function, // 表示只校驗(yàn)類(lèi)型前普，類(lèi)型是函數(shù)即可
}
}
</script>
