學習要點:
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)整理發布!