[ Vue.js ] 元件: Components

Vue能夠將部分程式碼封裝起來元件化，即為Components(元件)。
就像是把原本整頁的HTML拆分成各個小元件，再由這些元件組合重想要的HTML畫面。元件能夠重複呼叫、使用，達到元件共用的效果。

像傳統網頁結構可能會由header、nav、main、footer...等標籤所組成。
Vue則可將這四塊去塊拆成四個Components，四個分別有各自的template、script、style的vue檔案。

選擇重複共用程式碼

在之前所使用的專案中，可以看到src/views資料夾底下BindDemo.vue與DataDemo.vue的template中，都會有一段相同的程式碼重複。
<h1>Demo : {{ $route.params.title }}</h1>
這段程式碼是為了在內容最上層顯示單元的title，接下來就把這一段title元件化成Components吧。

src/views資料夾底下的BindDemo.vue與DataDemo.vue

建立Components

建立vue檔案，作為共用的元件。

在src/components資料夾底下建立vue檔案，命名為Title.vue。
並新增<template>區塊，加入<h1>Demo : {{ $route.params.title }}</h1>這段程式碼，讓這個Title.vue能夠依照route的title參數來顯示title(關於route的設定可參考這裡)。

src/components/Title.vue

註冊Components並使用

在要使用components的地方，將vue檔案引入(import)，設定為components並輸出(export)使用。

在src/views/BindDemo.vue的<script>區塊中import在src/components資料夾底下的Title.vue，並命名為ComponentTitle。

import ComponentTitle from "../components/Title.vue";

並在export default {...}中定義components為引入的ComponentTitle。

components: {
  ComponentTitle,
}

src/views/BindDemo.vue的<script>

在src/views/BindDemo.vue的<template>區塊中，刪除原先用來顯示title的程式碼<h1>Demo : {{ $route.params.title }}</h1>，加入以下程式碼:

<ComponentTitle></ComponentTitle>

src/views/BindDemo.vue的<template>

存檔執行後，點選v-bind選項，可以看到title的顯示。

局部註冊與全域註冊

components有局部註冊與全域註冊，差別在於局部註冊就要在每次使用時引入要使用的vue檔案並設定components，全域註冊則是在vue實體建立時註冊，接下來在整個專案都可直接使用。

前面在src/views/BindDemo.vue當中設定的components即為局部註冊，如果要讓另一個頁面也套用Title.vue作為components，就需要在另一個頁面做一次註冊動作。(如src/views/DataDemo.vue)

如果不想要每一次使用都需要先註冊元件的話，可以使用全域註冊的方式。

在src/main.js中import在src/components資料夾底下的Title.vue，並命名為ComponentTitle。

import ComponentTitle from "./components/Title.vue";

並在createApp後，註冊components。

app.component("ComponentTitle", ComponentTitle);

src/main.js

接下來，直接在src/views/DataDemo.vue的<template>的區塊中加入

<ComponentTitle></ComponentTitle>

src/views/DataDemo.vue的<template>

存檔執行後，點選data選項，可以看到畫面能夠直接呈現components的內容。