前言

雖說單一元件檔案的程式因為有 script setup 語法，能讓程式變得乾淨俐落。

不過並不是每個人都會使用 vite (或以前的 vue cli) 來使用 Vue。

用 CDN 引入 Vue 的程式開發方式，其實也能使用元件。

這篇文章要來記錄一下，這種方式使用元件的語法。

在輕前端使用元件

在 Vue 實體中宣告

我們已經知道 createApp 可以定義一個 Vue 的 「根」實體，既然說是「元件」，感覺就像某個大型機器人的「零件」一樣，會是在實體的內部。所以元件跟「實體」兩者算是密不可分的關係。

要定義一個元件，一個做法是直接寫在實體內，寫法是在 createApp 內寫一個 components(記得有 s) 物件屬性。
在 components 物件內定義的內容，就是元件了。

用說的可能很模糊，直接看語法：

Vue.createApp({
  components: {
    // 元件名稱
    "first-component": {},
    // 第二個元件
    "second-component": {},
  },
  setup() {},
});

透過回傳的參數宣告

還記得可以宣告一個變數去接 Vue.createApp 回傳出來的東西嗎？

const app = Vue.createApp({});

app.mount("#app");

一樣，那個 app 變數，代表能變的數 (好像在講廢話)，可以自由宣告。

而元件的定義，就是需要透過這個變數來創造：

const app = Vue.createApp({});

// component 第一個參數會是元件的名字，第二個參數是物件
app.component("first-component", {});

app.component("second-component", {});

app.mount(".app");

透過實體的 component 方法，我們可以針對這個實體去定義它的子元件。

元件物件的內容

先看一下元件物件沒東西的樣子：

app.component("my-component", {});

這個物件內可以寫的東西，其實就跟 createApp 中的物件完全一樣。

只不過 createApp 實體的 模板 可以直接寫在 HTML 標籤中，省略 template 屬性，但元件本身因為不是掛在 HTML 上，而是依賴著實體，所以元件的 模板 必須寫在 template 裡面：

app.component("my-component", {
  // 這是元件的模板
  template: `<h1> myApp：{{ data}} </h1>`,
  setup() {
    const data = Vue.ref("aaaa");
    return { data };
  },
});

為了方便排版，用這種模式定義的元件通常會使用 ES6 模板語法( `` ) 來操作。

除此之外，記得 createApp 有自己的 setup() 可以用來定義自己的狀態、方法、生命週期。元件也是這樣，元件也有自己的 setup() 可以使用，這裡面能寫的東西跟之前介紹 setup() 語法能撰寫的東西完全一樣。

定義好元件之後，就可以在實體模板內 (#app) 中使用這個名稱：

<div id="app">
  <my-component></my-component>
</div>

由於這個東西已經包成元件，表示它擁有重複使用的特性：

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

元件標籤命名

一般來說，只要使用合法的 JS 屬性名稱，都可以當作 Vue 的元件名稱。

不過要知道的是，當我們建立好元件，對這個元件定義的名稱，最後是會放到 HTML 上面使用，為了避免名稱定義成跟 HTML tag 相同的字眼，通常建議以兩個以上的單字來命名。

你可能會疑惑怎麼可能定義出 HTML 標籤的名稱，標籤不都叫 h1、div、p 這種沒意義的字嗎？

舉例來說，我們想建立一個對話框的元件，於是將元件名稱定義成 dialog，或者我們想建立一個跑馬燈的元件，跑去找 google 翻譯，想知道這兩個東西的英文叫什麼，於是得到這兩個結果

於是我們就很開心的把單字寫到元件名稱中：

app.component("dialog", {});
app.component("marquee", {});

不過你知道嗎？這兩個單字，就剛好是 HTML 中就有的標籤！
你可以點超連結進去看 MDN
對話框
跑馬燈

雖然跑馬燈標籤 <marquee> 已經是官方定義不推薦使用的標籤，不過瀏覽器目前還是有支援這個標籤的運作。

我想，除非真的很專精 HTML 所有標籤，否則我們很難辨別某個單字是不是會跟 HTML 既有標籤衝突。

要避免衝突，最簡單的方式，就是直接使用兩個以上的單詞宣告元件名稱，例如 <run-horse-light> 、<dialog-box>。

除了這種寫法，也可以用 JS 愛用命名方式，駝峰：

app.component("runHorseLight", {});
app.component("dialogBox", {});

在使用上，如果在 .html 檔案中要寫元件，必須使用連字號的寫法：

<div id="app">
  <dialog-box></dialog-box>
</div>

如果使用駝峰寫法，.html 檔案看不懂：
以下是不支援的寫法

<div id="app">
  <dialogBox></dialogBox>
</div>

不過如果是昨天提到的 SCF .vue 檔案，在 template 標籤中，這兩種寫法都可以：

<template>
  <dialog-box></dialog-box>
  <dialogBox></dialogBox>
</template>

總結

這篇文章紀錄如何在元件實體定義一個元件的幾個方法

• 使用實體物件 components 屬性，將元件撰寫在內
• 透過實體回傳值的 component 方法定義

並且這種寫法的元件模板，需要定義在 template 標籤中。

元件的命名，則建議使用連字號(-) 或是駝峰式，宣告兩個以上的單詞，以避免與原生 HTML 標籤衝突。