2025-04-06-為什麼不在 MyBanner.vue 裡直接寫死 class？為什麼要透過 props（像 type）去控制？

發表於 閱讀次數：
2025-04-06-為什麼不在 MyBanner.vue 裡直接寫死 class？為什麼要透過 props（像 type）去控制？

2025-04-06-為什麼不在 MyBanner.vue 裡直接寫死 class？為什麼要透過 props（像 type）去控制？

這個問題問得非常好 👍
「為什麼不在 MyBanner.vue 裡直接寫死 class？為什麼要透過 props（像 type）去控制？」
這跟 元件設計的彈性 有關。

1. 如果直接寫 class

例如你這樣做：

1
2
3
<div class="my-banner error">
  <slot></slot>
</div>
  • 優點：簡單，馬上就有紅色的錯誤樣式。
  • 缺點：這個元件只能用錯誤紅色樣式，想要變成 success/info 就要 複製一個新的元件 或去修改原始檔案。
  • 等於「死板的 UI」，重複性很高。

2. 如果用 props + 動態 class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div class="my-banner" :class="type">
    <slot></slot>
  </div>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'info', // 預設是藍色
    validator: (val) => ['error','warning','success','info'].includes(val)
  }
})
</script>

<style scoped>
.my-banner.error { background: #fdd; border: 1px solid red; }
.my-banner.warning { background: #ffe5b4; border: 1px solid orange; }
.my-banner.success { background: #dfffd6; border: 1px solid green; }
.my-banner.info { background: #e0f0ff; border: 1px solid blue; }
</style>

使用的時候：

1
2
3
<MyBanner type="error">❌ 刪除失敗</MyBanner>
<MyBanner type="success">✅ 操作成功</MyBanner>
<MyBanner type="info">ℹ️ 新版本已上線</MyBanner>
  • 優點：一個元件就能處理多種情境。
  • 更符合 元件的設計精神：可重用、可組合。
  • 如果將來要新增 type="neutral"，只要加一行 CSS 即可，不需要改 Vue 模板。

3. 總結

  • 直接用 class → 簡單，但死板，不好擴充。
  • 用 props + class → 稍微多一點程式，但能讓元件在不同地方重複使用，維護性強。