目錄

1.注冊自定義特性

2.prop的大小寫

?3.傳遞給一個對象的所有屬性

4.prop驗證

---

1.注冊自定義特性

當我們在注冊組件時，希望其結構、樣式和行為是不變的，但是數據應該是可變的，也就是說，所使用的數據應該由外界傳遞給組件。為了實現數據的接收，組件需要注冊props，將數據作為一個自定義特性傳遞給組件，如下例：

div id="app"><video-item title='羊村搖'poster="https://developer.duyiedu.com/bz/video/955bac93ccb7f240d25a79b2ff6a9fdbda9537bc.jpg@320w_200h.webp"play="24323" rank="3423"></video-item> </div> //注冊一個組件 Vue.component('video-item', {props: ['title', 'poster', 'play', 'rank'],template: `<div class="video-item"><div class="poster"><img :src="poster" :alt="title"><div class="info"><div class="play">{{ play }}</div><div class="rank">{{ rank }}</div></div></div><div class="title">{{ title }}</div></div>` }) const vm = new Vue({el: "#app", })

在上述模板中，我們能夠在組件實例中訪問這個值，就像訪問data中的值一樣

2.prop的大小寫

HTML中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。因此，當傳遞的prop為短橫線分隔命名時，組件內的props應為駝峰命名，如下例

<video-list :video-list="videoList"></video-list> //短橫線命名 Vue.component('video-list', {props: ['videoList'], //駝峰命名template: `<div class="video-list"><video-itemv-for="video in videoList"v-bind="video"></video-item></div>` })

?3.傳遞給一個對象的所有屬性

如果要將一個對象的所有屬性都作為prop傳入，可以使用不帶參數的v-bind。

4.prop驗證

在注冊組件時，可以為組件的prop指定驗證要求，即可以設置prop的數據類型，當所傳數據不滿足指定的數據類型時，Vue就會在瀏覽器控制臺進行警告。

為了指定prop的驗證方式，可以為props中的值提供一個帶有驗證需求的對象，而不是一個字符串數組，如下例：

Vue.component('video-item', {props:{title: String,poster: String,play: Number,rank: String} })

上述代碼中，對prop進行了基礎的類型檢查，值類型可以為下列原生構造函數中的一種：String/Number/Boolean/Array/Object/Date/Function/Symbol/任何自定義構造函數，或者上述內容組成的數組

【注】null和undefined會通過任何類型驗證，

除了基礎類型檢查外，還可以配置高級選項，對prop進行其他驗證，如：類型檢測、自定義驗證和設置默認值。如下例：

Vue.component('video-item', {props:{title: {type: String, //檢查prop是否為給定的類型default: '羊村搖', //為改prop指定一個默認值，對象或數組的默認值必須從一個工廠函數返回，如：default () { return {a: 1, b: 10} }required:true, //定義該prop是否為必填項validator(prop) { // 自定義驗證函數，該prop的值回作為唯一的參數代入，若函數返回一個falsy的值，那么就代表驗證失敗return prop.length < 4;}}}` })

總結

以上是生活随笔為你收集整理的vue_prop注册及验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。