選擇重複共用程式碼
在之前所使用的專案中,可以看到src/views資料夾底下BindDemo.vue與DataDemo.vue的template中,都會有一段相同的程式碼重複。
<h1>Demo : {{ $route.params.title }}</h1>
這段程式碼是為了在內容最上層顯示單元的title,接下來就把這一段title元件化成Components吧。
建立Components
建立vue檔案,作為共用的元件。
在src/components資料夾底下建立vue檔案,命名為Title.vue。
並新增<template>區塊,加入<h1>Demo : {{ $route.params.title }}</h1>
這段程式碼,讓這個Title.vue能夠依照route的title參數來顯示title(關於route的設定可參考這裡)。
註冊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的<template>區塊中,刪除原先用來顯示title的程式碼<h1>Demo : {{ $route.params.title }}</h1>
,加入以下程式碼:
<ComponentTitle></ComponentTitle>
存檔執行後,點選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/views/DataDemo.vue的<template>的區塊中加入
<ComponentTitle></ComponentTitle>
存檔執行後,點選data選項,可以看到畫面能夠直接呈現components的內容。