2025-03-25- 「：」 的意思是「綁定 JavaScript 表達式」

「：」 的意思是「綁定 JavaScript 表達式」

: 的意思是「綁定 JavaScript 表達式」

好問題！這其實跟 Vue 中 props 的值資料型別 有關。來一點點細緻但超實用的解釋：

---

✅ : 的意思是「綁定 JavaScript 表達式」

在 Vue 中：

<MyComponent :prop="someValue" />

冒號 : 表示這個 prop 是要「綁定一個 JavaScript 表達式」，而不是純文字。

---

🔍 分析你的例子：

<MyBadge
  label="重要"         ← 傳的是「字串」"重要"
  color="red"          ← 傳的是「字串」"red"
  text-color="white"   ← 傳的是「字串」"white"
  :rounded="true"      ← 傳的是「布林值」true
/>

• label="重要" 是純文字 → Vue 自動當作 "重要" 這個 字串
• color="red" 同理，也是字串
• text-color="white" 也是字串

但：

• :rounded="true" 前面有冒號，表示這裡的 true 是 JavaScript 的布林值（不是字串 “true”）

---

🧪 如果你寫成：

<MyBadge rounded="true" />

❌ rounded 接收到的是字串 "true"，不是布林值 true
所以會變成 Boolean("true") → true，但這不是 Vue 建議的寫法

---

🔑 記法整理：

寫法	傳給子元件的型別	備註
prop="abc"	字串 "abc"	當作字串
:prop="abc"	表達式 abc	JavaScript 變數、值或運算式
:prop="true"	布林值 true	✔ 正確布林值傳遞
prop="true"	字串 "true"	⚠ 非預期的布林值傳遞

---

✅ 建議：

• 如果你傳的是 文字，可以不加冒號 → "文字" 字串自動處理。
• 如果你傳的是 布林值、數字、變數、運算式 → 一定要加冒號 :

---