商用網站架設實務

LESSON-21 · checkpoint

Vue 3 基礎：元件、props 與 emits

主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。

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

開始前確認

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

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

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

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

照這個順序做

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

CHECKPOINT-1

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

目的

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

修改檔案

index.html

程式碼位置

checkpoint service-card props binding

現在要做：請在 index.html 的「checkpoint service-card props binding」位置完成：在已註冊的 service-card 上補回 :service 綁定

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

<service-card
  v-for="service in services"
  :key="service.id"
  :service="service"
  @select="selectService"
></service-card>

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

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

卡住時先看這裡

常見錯誤：把 service 寫成字串、只改 props 宣告，或重新複製整個元件而沒有修正父層 attribute。

第一個檢查：只看 checkpoint/files/index.html 的 service-card 開始標籤，確認有 :service="service"。

階段檔案

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

開啟 checkpoint 的可執行入口

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｜checkpoint</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">這份頁面故意少了 :service；先觀察 fallback，再只修正父層的資料綁定。</p>
    <section class="service-list" aria-labelledby="services-title">
      <h2 id="services-title">可選服務</h2>
    <service-card
      v-for="service in services"
      :key="service.id"
      @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, default: () => ({ name: "尚未收到 service props", summary: "請回到父層補上 :service 綁定。" }) } },
  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");

完成驗收

下一步

Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。

前往 Solution，逐檔對照差異