學習要點：
1.靜態 Prop
2.Prop 類型
本節課我們來開始學習 Vue3.x 的組件中 Prop 類型的設置方法。
一．靜態 Prop
1. 我們之前使用的 v-bind:parent-message="message"，這是動態 Prop；
<html-a v-bind:parent-message="message">html-a>
PS：動態 Prop 可以將父組件的數據屬性傳遞到子組件中；
2. 那么靜態 Prop 又是什么意思？其實就是直接通過 HTML 端給子組件賦值；
<html-a parent-message="直接傳入靜態字符串">html-a>
PS：沒有使用 v-bind 就是靜態 Prop，然后將字符串直接賦值給 parentMessage；
二．Prop 類型
1. 上一節課，我們采用了 props : ['abc', 'def']這種形式構建數據父傳子；
2. 而這種方式，是以字符串的形式來進行值傳遞的，其實還可設置數據類型；
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
// 或任何其他構造函數
}
PS：手冊摘入的所有數據類型；
3. 當我們傳入數值時，我們可以通過 Prop 類型進行限制和驗證；
<html-a v-bind:parent-message="100">html-a>
//prop 通信
props : {
parentMessage : Number
},
PS：當傳入字符串的時候，不需要 v-bind 的，當傳入數字、數組、布爾和對象時則需要；
PS：當傳入不匹配的類型時，控制臺會提示警告；null 和 undefined 會通過任何類型檢查；
4. 在父類設置一個對象，然后屬性設置一個值傳遞給子組件；
// 第一步，父組件
return {
message : '父組件 Vue3.x~',
post : {
likes : 100
}
}
// 第二步，HTML 端
<html-a v-bind:parent-message="post.likes">html-a>
// 第三步，子組件
props : {
parentMessage : Number
},
5. 當直接傳遞一個對象的時候，我們可以在插值通過對象的調用方法獲取值；
<html-a v-bind:parent-message="{name : 'Mr.Lee'}">html-a>
// 模板
template : `
`
PS：當然，也可以直接傳遞父組件的對象，一個意思；而數組、布爾等類型都一樣自行練習；
6. 也可以傳入對象的所有 property(屬性)，然后通過查看器查看節點變化；
<html-a v-bind="post">html-a>
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
