之前的文章我們介紹了 vue 中父組件之間的傳值，本章我們再來看一下父子組件間傳值的參數校驗和非 Props 特性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <child :title="123"></child> 11 </div> 12 <script> 13 Vue.component("child", { 14 props: ['title'], 15 template: ` 16 <p>{{title}}</p> 17 ` 18 }); 19 var app = new Vue({ 20 el: '#app', 21 data: { 22 title: "hello world" 23 }, 24 }) 25 </script> 26 </body> 27 </html>
上面的代碼中我們我們在父組件中定義了一個 title 數據，並通過 :title="" 的形式將 title 數據傳給子組件 child，然后子組件通過 props 屬性接收該 title，通過 template 模板將 title 輸出，結果如下：
但是我們現在有這樣一個需求，子組件想要校驗父組件傳過來的值，如果符合才顯示，那么我們就可以通過 props 屬性進行校驗，在上面的代碼中我們定義 props 為一個數組對象，其實我們可以將 props 定義為一個對象，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <child :title="title"></child> 11 </div> 12 <script> 13 Vue.component("child", { 14 props: { 15 title: Number 16 }, 17 template: ` 18 <p>{{title}}</p> 19 ` 20 }); 21 var app = new Vue({ 22 el: '#app', 23 data: { 24 title: "hello world" 25 }, 26 }) 27 </script> 28 </body> 29 </html>
在上面的代碼我們將 props 改為了對象形式，並且定義 title: Number，意思是將 title 定義為一個 Number 類型，我們現在在頁面上看一下結果：
在控制台報錯，意思說 tltle: "hello world" 是一個字符串，但我們在子組件定義為了一個 Number 類型，兩者不符所以報錯，所以我們可以將 props 下的 title 定義為 String 類型就可以了，當然我們也可以這樣寫 ： title: [Number, String] ，意思是傳入的 title 值既可以是 Number 類型也可以是 String 類型。
在 props 下的數據我們還可以定義其他屬性，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <child :title="title"></child> 11 </div> 12 <script> 13 Vue.component("child", { 14 props: { 15 title: { 16 type: [Number, String], 17 required: true, 18 default: "hi vue", 19 validator(value){ 20 return value.length > 5 21 } 22 }, 23 }, 24 template: ` 25 <p>{{title}}</p> 26 ` 27 }); 28 var app = new Vue({ 29 el: '#app', 30 data: { 31 title: "hello world" 32 }, 33 }) 34 </script> 35 </body> 36 </html>
上面的代碼中我們將 props 中的 title 定義為了一個對象，對象中
type 表示驗證父組件傳入數據的類型，
required 表示該值是否必須傳入，false 表示可以不傳入，true 表示必須傳入，即 <child> 標簽內是否寫 :title="" 傳入該值。
default 表示傳入該值的默認值，如果上面的 required 為 false 並且父組件並沒有傳入 title 值，我們可以自己定義 title 的值。
validator 表示驗證的方法，我們可以自己定義傳入值的校驗方法，如傳入值的長度等。
接下來我們說一下 props 特性和非 props 特性，在上面的代碼中我們對父組件傳過來的值都用 props 屬性進行了接收，我們就可以把這個稱為 props 特性，那它跟非 props 特性有什么區別的，非 props 特性就是我們不在 props 里接收父組件傳過來的值，那么如果我們在子組件的 template 模板中使用該值，則會報錯，同時非 props 特性會在 HTML 頁面代碼內暴露出傳過來的值，即 title=""，props 特性則不會，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <child :title="title"></child> 11 </div> 12 <script> 13 Vue.component("child", { 14 props: { 15 // title: { 16 // type: [Number, String], 17 // required: true, 18 // default: "hi vue", 19 // validator(value){ 20 // return value.length > 5 21 // } 22 // }, 23 }, 24 template: ` 25 <p>{{title}}</p> 26 ` 27 }); 28 var app = new Vue({ 29 el: '#app', 30 data: { 31 title: "hello world" 32 }, 33 }) 34 </script> 35 </body> 36 </html>
我們在 props 中沒有接收父組件傳過來的 title 數據就在 template 模板中使用，則會在控制台報錯，且在 HTML 代碼中將 title: "hello word" 暴露在了標簽內。props 特性接收 title 值的會就不會出現上面的情況。
以上代碼演示我們是基於引入開發環境的 js 來演示的，即
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
如果我們使用生產環境則不會出現上面的控制台警告報錯，這是為了線上使用閱讀者舒適的閱讀，生產版本如下：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>