前言

Vue 是一個資料驅動的框架，畫面是由資料的狀態所決定的，
當資料改變，畫面會自動更新。

因此，掌握資料的流向、變動方式與渲染時機，

是深入理解 Vue 的核心關鍵。( 前提是沒有被淹沒

在這樣的設計下，「元件之間如何傳遞資料」就變得格外重要，
這也是為什麼 props 的概念值得特別關注。

單向? 雙向? 跟React 差在哪

如果你在網上查資料，
你可能會看到有人說 React 是單向資料流， Vue 是雙向綁定。

在 Props 這個概念上，
React 跟 Vue 都是以單向資料流的原則。

單向資料流的核心概念是，
props 根據父組件的變化將資料傳遞給子組件，

絕不會，也不該逆向傳遞或是修改接收的 props 資料本身。

如果真的要修改你也應該是用一個 ref 或是 computed 等等去做物件的 proxy。

Proxy
資料物件的代理，允許對資料做攔截跟操作，是 Vue 響應式系統的基礎

使用

<script setup>
const props = defineProps({
 title: String,
 likes: Number,
});
console.log(props.title);
</script>

▲ defineProps 範例程式碼

▲ defineProps 說明圖
這邊可以注意的地方是第三個 defineProps() 如果不顯式聲明 props，
那 Vue 將會把你傳遞的參數判定為 attribute 而不是 props。

想了解判斷原始碼可以看 在 Vue 過氣前要學的第十一件事 - 抓住 Vue 的心 / v-bind

一個組件需要顯式聲明它所接受的 props，
這樣 Vue 才能知道外部傳入的哪些是 props，
哪些是透傳属性 (關於透傳属性，我們會在後面篇章中討論)。

響應式 Props 解構 (3.5+)

你會發現上面的程式碼中 我們為了要 log 出 props 裡面的 title，
需要明確定義 const props = defineProps() 否則 vue 找不到。

const { title } = defineProps({
 title: String,
 likes: Number,
});
console.log(title);
// `title` 將會由編譯器轉換為 `props.title`

▲ 從 defineProps 解構出 title
但在 3.5 以上的版本提供了這種做法，使你可以直接從 defineProps() 中解構，
所需要的屬性而無須明確定義 const props。

命名約定

在定義 prop 時應採用駝峰式命名( camelCase )

const { articleTitle } = defineProps({
 articleTitle: String,
});
console.log(articleTitle);

<MyComponent article-title="hello" />

▲ 駝峰式命名和烤肉串命名範例
但在組件傳遞時，
組件名稱應該採用帕斯卡命名 (PascalCase) 又叫大駝峰，
props 應採用烤肉串命名 (Kebab-case)

突然發現傳個 props 要用到三種命名方式 (?

結語

在這篇文中我們講解了 Vue 的資料流，介紹了如何在子組件接收 props，
講解了 3.5+ 中提供的響應式解構，讓你不用每次都要從 props 中解包，
透過動態綁定來傳遞 props 參數。

props 是組件溝通中最常見最基本的應用，
掌握好資料流向可以讓你對於整個應用的 組件拆分 跟 父子層關係 有更好的理解。

如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧。

一些小練習

1. Vue props 是屬於單向資料流還是雙向資料流?
2. 如果沒有在子組件顯示聲明 props，會有什麼樣的狀況發生?
3. 如果今天要傳遞給組件的是參數不是純字串應該怎麼做，
4. 可以思考一下 props 的傳遞多少會增加組件的複雜度，那真的有必要無腦拆組件嗎?
   拆分組件究竟是為了方便管理還是為了自己的方便呢?