昨天有提到 Vue 的實體是由元件所組成，而且元件可以被重複使用，當父元件需要向子元件傳遞資料時，需要透過 props 屬性 來實現資料傳遞。

Props 是什麼？

Props 是父元件向子元件傳遞資料的方式，在子元件中設定要傳入的變數名稱，當在 HTML 中要使用該元件時，透過使用該變數名稱便能將資料傳入，其中任何類型的值都可以作為 props 的值被傳遞。

<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  },
  isActive: Boolean
})
</script>

使用方式

若沒有使用<script setup>語法糖則需要使用 props 來定義：

以下是官方文件的範例 (Composition API)

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作為第一個參數
    console.log(props.foo)
  }
}

若使用<script setup>語法糖則需要使用 defineProps() 來定義：

以下是官方文件的範例 (Composition API)

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

此外 Props 傳遞資料的方式可以分成兩種：

• 靜態Props：直接傳入字串而不是外層元件的資料內容。
• 動態Props：使用 v-bind (或簡寫：) 的方式將外層元件的資料內容傳入。

單向數據流

所有的 props 都遵循著單向綁定的原則，props 因父元件的更新而變化，會將新的狀態向下流往子元件，但是並不會逆向傳遞，可以防止子元件更改父元件的狀態，導致應用的數據流會變得很混亂、不好理解，而且 Vue 還會在控制台上顯示錯誤訊息。

參考資源

https://book.vue.tw/CH2/2-2-communications.html
https://zh-hk.vuejs.org/guide/components/props.html
https://hackmd.io/@CynthiaChuang/Vue-Study-Notes-Contents/%2F%40CynthiaChuang%2FVue-Study-Notes-Unit06%23props-%25E4%25BD%25BF%25E7%2594%25A8%25E4%25B8%258A%25E7%259A%2584%25E6%25B3%25A8%25E6%2584%258F%25E4%25BA%258B%25E9%25A0%2585