組件的參數校驗
組件的參數校驗指的是什麼呢?你父組件向子組件傳遞的內容,子組件有權對這個內容進行一些約束,這個約束我們可以把它叫做參數的校驗。
<div id="root">
<child content="hello world"></child>
</div>
Vue.component('child',{
props: ['content'],
template: '<div>{{content}}</div>'
})
let vm = new Vue({
el: '#root',
})
現在有這樣一個需求,父組件調用子組件的時候,傳遞的這個content
,我要做一些約束,要求它我傳遞過來的content
必須是一個字符串,我們該怎麼實現呢?
<div id="root">
<child content="hello world"></child>
</div>
Vue.component('child',{
props: {
content: String //子組件接收到的 content 這個屬性,必須是一個字符串類型的
},
template: '<div>{{content}}</div>'
})
let vm = new Vue({
el: '#root',
})
組件接收到的content
這個屬性,必須是一個字符串類型的,如果我需要的參數類型是字符串或者數組,又該怎麼寫呢?
props: {
content: [ String, Number ]
},
content
的類型,可以用數組來表示。
content
其實還有更復雜的用法:
props: {
content: {
type: Sring,
required: true, //必傳
default: 'default value', //默認顯示,非必傳會顯示
validator(value){ //檢測 content 的長度,如果長度大於 5,正常顯示,如果長度小於 5 則報錯
return (value.length > 5)
}
}
}
非props
特性
說到非props
特性,它一定和props
特性相對應。
props
特性:當你的父組件使用子組件的時候,通過屬性向子組件傳值的時候,恰好子組件裏面聲明瞭對父組件傳遞過來的屬性的一個接收,也就是說父子組件有個對應關係,如果你這麼寫我們就把叫做props
特性
props
特性的特點是,如下圖:
- 我們在子組件裏有一個
content
的內容傳遞,這個屬性的內容傳遞是不會在dom
標籤上進行顯示的。 - 當你父組件傳遞了
content
,你子組件接收了這個content
,你在模版裏就可以直接通過插值表達式或者通過this.content
,去取得content
裏面的內容了。
非props
特性:父組件向子組件傳遞了一個屬性,但是子組件並沒有props
這塊的內容,也就是說子組件並沒有聲明我要接收父組件的傳遞過來的內容
非props
特點:
- 非
props
特性在子組件裏面,沒辦法獲取到你父組件傳遞的內容,因爲你壓根沒聲明你要獲取的內容,也就沒法用。 - 如果我們用的是非
props
特性,那麼這個特性是會顯示在dom
標籤上的