商用網站架設實務

LESSON-21 · starter

Vue 3 基礎：元件、props 與 emits

你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：入口頁可以開啟

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Elements、Console、Network、360px 與鍵盤 focus狀態。

會用到的檔案：index.html、style.css、main.js

本堂焦點：用元件、props 與 emits 建立清楚的資料流

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

TODO-1

先把一張卡片的畫面責任封裝起來，讓父層只負責資料清單。

目的

先把一張卡片的畫面責任封裝起來，讓父層只負責資料清單。

修改檔案

main.js

程式碼位置

ServiceCard 宣告（createApp 之前）

現在要做：請在 main.js 的「ServiceCard 宣告（createApp 之前）」位置完成：在 createApp 之前建立 ServiceCard，宣告 service props 並顯示服務資料

貼上位置：main.js：ServiceCard 宣告（createApp 之前） 區塊，先保留同一檔案的其他內容。

第一層｜提示：先確認 ServiceCard 宣告、app.component 與 app.mount 的先後順序，再對照 props.service。

第二層｜查看關鍵行
const ServiceCard = {
  props: { service: { type: Object, required: true } },
};
第三層｜查看完整答案（最後才開）
const ServiceCard = {
  props: {
    service: { type: Object, required: true },
  },
  template: `<article class="service-card">
  <h2>{{ service.name }}</h2>
  <p>{{ service.summary }}</p>
</article>`,
};

預期結果：元件在 app.component 註冊後可以接收父層傳入的 service，並顯示 name 與 summary。

驗收證據：main.js 的元件宣告位於 createApp 外；畫面出現兩張卡片且文字來自 props。

卡住時先看這裡

常見錯誤：把 ServiceCard 宣告在 setup 內，卻在外層註冊；或讓子元件讀不存在的全域 service。

第一個檢查：先確認 ServiceCard 宣告、app.component 與 app.mount 的先後順序，再對照 props.service。

TODO-2

讓父層清單逐筆建立子元件，並避免瀏覽器把自閉合自訂元素解析錯誤。

目的

讓父層清單逐筆建立子元件，並避免瀏覽器把自閉合自訂元素解析錯誤。

修改檔案

index.html

程式碼位置

service-card element inside service-list

現在要做：請在 index.html 的「service-card element inside service-list」位置完成：在 DOM template 使用 kebab-case、完整結束標籤與 service 綁定

貼上位置：index.html：service-card element inside service-list 區塊，先保留同一檔案的其他內容。

第一層｜提示：只看 index.html 的 service-list，逐字檢查標籤大小寫、結束標籤與四個綁定。

第二層｜查看關鍵行
v-for="service in services"
:key="service.id"
:service="service"
@select="selectService"
第三層｜查看完整答案（最後才開）
<service-card
  v-for="service in services"
  :key="service.id"
  :service="service"
  @select="selectService"
></service-card>

預期結果：兩張卡片各自顯示正確服務；Elements 看到 service-card 的實際輸出。

驗收證據：父層有 v-for、:key=service.id、:service=service 與 @select=selectService，且使用 <service-card></service-card>。

卡住時先看這裡

常見錯誤：使用 <ServiceCard ... />、:key=service.name，或把 :service=service 寫成頁面文字。

第一個檢查：只看 index.html 的 service-list，逐字檢查標籤大小寫、結束標籤與四個綁定。

TODO-3

把子元件互動轉成父層可以處理的自訂事件；子元件不直接改父層狀態。

目的

把子元件互動轉成父層可以處理的自訂事件；子元件不直接改父層狀態。

修改檔案

main.js

程式碼位置

ServiceCard emits 與 button

現在要做：請在 main.js 的「ServiceCard emits 與 button」位置完成：宣告 select emits，讓卡片內真正的 button 傳出完整 service payload

貼上位置：main.js：ServiceCard emits 與 button 區塊，先保留同一檔案的其他內容。

第一層｜提示：先對照 emits、$emit 事件名稱、父層 @select 與 payload 是否都是 service 物件。

第二層｜查看關鍵行
emits: ["select"],
<button type="button" @click="$emit('select', service)">選擇服務</button>
第三層｜查看完整答案（最後才開）
const ServiceCard = {
  props: {
    service: { type: Object, required: true },
  },
  emits: ["select"],
  template: `<article class="service-card">
  <h2>{{ service.name }}</h2>
  <p>{{ service.summary }}</p>
  <button type="button" @click="$emit('select', service)">選擇服務</button>
</article>`,
};

預期結果：Tab 可聚焦每張卡片的按鈕；按下後父層 selectedService 顯示正確名稱。

驗收證據：ServiceCard 有 emits: ["select"]、button 使用 type=button 與 $emit("select", service)，父層 @select 收到同一個物件。

卡住時先看這裡

常見錯誤：讓 article click 取代 button、事件名稱寫成 select-service，或只送出 service.name。

第一個檢查：先對照 emits、$emit 事件名稱、父層 @select 與 payload 是否都是 service 物件。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 starter 的可執行入口

index.htmlVue DOM template：提供唯一 #app、service-list、兩階段綁定與 aria-live status。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LESSON-21｜元件、props 與 emits｜starter</title>
  <link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main id="app" class="page-shell">
    <p class="eyebrow">LESSON-21 · Vue 3 CDN</p>
    <h1>{{ title }}</h1>
    <p class="page-description">請依序完成 ServiceCard、props、template 綁定與 emits；目前先保留安全 placeholder，避免未註冊元件警告。</p>
    <section class="service-list" aria-labelledby="services-title">
      <h2 id="services-title">可選服務</h2>
    <!-- TODO-2：加入 service-card，使用 v-for、:key、:service 與 @select。 -->
    </section>
    <p id="status" class="status" aria-live="polite">
      {{ selectedService ? "目前選取：" + selectedService.name : "尚未選取服務" }}
    </p>
  </main>
  <script src="https://unpkg.com/vue@3.5.40/dist/vue.global.js"></script>
  <script src="main.js" defer></script>
</body>
</html>
style.css呈現層：控制卡片、button、focus、status 與 360px 窄版可讀性。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.service-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.service-card { display: grid; gap: .6rem; padding: 1rem; border: 1px solid #cbd8e4; border-radius: 14px; background: #fbfdff; }
.service-card h2, .service-card p { margin: 0; }
button { width: fit-content; padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.status { min-height: 2rem; color: #17643d; font-weight: 700; }
@media (max-width: 560px) { .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }
main.jsVue 行為：在 createApp 外宣告 ServiceCard，註冊後由 props、emits 與 parent handler 串起資料流。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const VueApi = window.Vue;

const ServiceCard = {
  template: "<article class=\"service-card\"><h2>尚未完成 ServiceCard</h2><p>請先完成 TODO-1 的 props 元件。</p></article>",
};

const app = VueApi.createApp({
  setup() {
    const title = VueApi.ref("可重用的服務卡片");
    const services = VueApi.ref([
      { id: "consultation", name: "到府諮詢", summary: "先釐清需求，再選擇適合的服務。" },
      { id: "maintenance", name: "定期維護", summary: "建立穩定、容易持續的維護節奏。" },
    ]);
    const selectedService = VueApi.ref(null);
    function selectService(service) {
      selectedService.value = service;
    }
    return { title, services, selectedService, selectService };
  },
});

app.component("service-card", ServiceCard);
app.mount("#app");

完成驗收

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口