LESSON-21 · solution

Vue 3 基礎：元件、props 與 emits

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。這頁用可觀察證據和 anchor 指出下一個動作。

Starter3 個小成果

Checkpoint一個核心缺口

Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

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

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

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

照這個順序做

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

目的

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

修改檔案

main.js

程式碼位置

ServiceCard 宣告（createApp 之前）

現在要做：先對照差異，再檢查在 main.js 的「ServiceCard 宣告（createApp 之前）」對照這項變更：const ServiceCard = { props: { service: { type: Object, required: true }, }, template: <article class="service-card"> <h2>{{ service.name }}</h2> <p>{{ service.summary }}</p> </article>, };

貼上位置：main.js 的 ServiceCard 宣告（createApp 之前）區塊

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。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

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

修改檔案

index.html

程式碼位置

service-card element inside service-list

現在要做：先對照差異，再檢查在 index.html 的「service-card element inside service-list」對照這項變更：<service-card v-for="service in services" :key="service.id" :service="service" @select="selectService" ></service-card>

貼上位置：index.html 的 service-card element inside service-list 區塊

<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>。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

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

修改檔案

main.js

程式碼位置

ServiceCard emits 與 button

現在要做：先對照差異，再檢查在 main.js 的「ServiceCard emits 與 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>, };

貼上位置：main.js 的 ServiceCard emits 與 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 收到同一個物件。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

修正元件已存在但每張子元件沒有收到父層資料的資料契約缺口。

修改檔案

index.html

程式碼位置

checkpoint service-card props binding

現在要做：先對照差異，再檢查在 index.html 的「checkpoint service-card props binding」對照這項變更：:service="service"

貼上位置：index.html 的 checkpoint service-card props binding 區塊

:service="service"

預期結果：修正前兩張卡顯示 fallback；修正後分別顯示主要服務與定期維護。

驗收證據：Elements 的兩張卡片文字與 main.js 的 services 陣列逐筆一致，Console 無 required prop 或 unresolved component 警告。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

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

開啟 solution 的可執行入口

開啟index.htmlVue DOM template：提供唯一 #app、service-list、兩階段綁定與 aria-live status。
開啟style.css呈現層：控制卡片、button、focus、status 與 360px 窄版可讀性。
開啟main.jsVue 行為：在 createApp 外宣告 ServiceCard，註冊後由 props、emits 與 parent handler 串起資料流。

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｜solution</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">完整結果：父層資料、子元件 props、button emit、payload 與 aria-live 狀態都可驗收。</p>
    <section class="service-list" aria-labelledby="services-title">
      <h2 id="services-title">可選服務</h2>
    <service-card
      v-for="service in services"
      :key="service.id"
      :service="service"
      @select="selectService"
    ></service-card>
    </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 = {
  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>",
};

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");

完成驗收

所有相關檔案可開啟或閱讀
沒有 TODO、CHECKPOINT 或 placeholder
能說明每個檔案為何改動
留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。

本階段成功證據：能說明「用元件、props 與 emits 建立清楚的資料流」如何透過畫面、DOM、Elements、Console、Network、360px 與鍵盤 focus被驗證。

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂