一肪获、父子組件介紹
image-20201029174738754.png
二孝赫、父組件給子組件傳值
1、父組件調(diào)用子組件的時(shí)候傳值
<template>
<v-header :title="title"></v-header>
</template>
<script>
import Header from './Header'
export default {
data() {
return {
title: "首頁組件title"
}
},
components: {
"v-header": Header
}
}
</script>
2寒锚、子組件接收父組件傳值
<template>
<header>{{title}}</header>
</template>
<script>
export default {
props: ["title"]
}
</script>
三违孝、Props驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求，例如你知道的這些類型喇喉。如果有一個(gè)需求沒有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你拣技。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助耍目。
props驗(yàn)證：
props: {
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過任何類型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對(duì)象
propE: {
type: Object,
// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function() {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function(value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 具有默認(rèn)值的函數(shù)
propG: {
type: Function,
// 與對(duì)象或數(shù)組默認(rèn)值不同，這不是一個(gè)工廠函數(shù) —— 這是一個(gè)用作默認(rèn)值的函數(shù)
default: function() {
return 'Default function'
}
}
四莫辨、單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中毅访，但是反過來則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)喻粹，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
另外型酥，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值冕末。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了档桃，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。
