摘要

元件是 Vue 應用程式中可重複使用的獨立功能區塊。它將 HTML 結構、JavaScript 邏輯和 CSS 樣式封裝在一起，讓我們能像組合樂高積木一樣來建構複雜的使用者介面。

定義與說明

在 Vue 的世界裡，一個元件就是一個擁有自己模板、腳本和樣式的可複用實例。透過將大型應用程式拆分成一個個小型、獨立且易於管理的元件，我們可以大幅提升程式碼的可維護性、可讀性與開發效率。每個元件都可以擁有自己的狀態與行為。

實作範例

一個簡單的計數器元件：

CounterButton.vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">
    你點擊了我 {{ count }} 次
  </button>
</template>

<style>
  button { background-color: lightblue; }
</style>

結論

元件化是現代前端框架的核心思想。它讓我們能以「組合」而非「繼承」的方式來建構 UI，將複雜問題拆解為簡單問題，是構建可擴展應用的基石。

元件封裝可重複使用