10. Vue3父組件給子組件傳值、Props、Props驗證、單向數據流

一、父子組件介紹

二、父組件給子組件傳值

1、父組件調用子組件的時候傳值

<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驗證

我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制台中警告你。這在開發一個會被別人用到的組件時尤其有幫助。

props驗證：

 props: { // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認值的數字 propD: { type: Number, default: 100 }, // 帶有默認值的對象 propE: { type: Object, // 對象或數組默認值必須從一個工廠函數獲取 default: function() { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function(value) { // 這個值必須匹配下列字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } }, // 具有默認值的函數 propG: { type: Function, // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數 default: function() { return 'Default function' } }

四、單向數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

另外，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。