終於踏入Javascript框架之Vue..(5)Component

當我們的專案不只是單一頁面顯示，而是由許多資料與各種畫面堆疊起來時，在撰寫與維護也會越來越複雜，而組件正好可以化繁為簡。

從初階到進階

在一開始學習html的時候，通常我們會在一個頁面上實作javascript,css,html，而想要稍微"進階一點"的時候，我們知道可以使用a標籤做出內部連結，例如

<a href="/about.html">點擊到關於我</a>

這時候就可以跳到另一個關於我的頁面。

但如果我們有一些畫面不想要跟著點擊而變動，像是

• 網站的目錄
• 網站header
• footer與版權頁

或者有些內容希望可以重複使用，例如

• 每項獨立商品的版面
• 格式相同的文章頁面

雖然可以用複製貼上的方式，但總是顯得有點沒有效率且笨拙，如果想要微調一些部分，可能又會牽一髮而動全身，因此組件就很適合應用在這樣的場景。

什麼是組件？

像前面提到的，我們可以把一個網頁拆分成好幾個小零件。

從巨觀的部分來看，在撰寫html時可能會用到<header><main><footer>這類的標籤。

再往小一點去拆，可能是一個div元素，例如<div class="content">，或者是一個button按鈕。

組件的使用可大可小，就看你在撰寫與執行的時候想怎麼去拆解，或者是要怎麼拆分在合作上比較方便。

使用組件的優點

• 減少文件體積，每個component在各自文件內
• 獨立性，每個component有各自的功能
• 複用性，在多個頁面上可重複使用相似度高的component
• 團隊合作，可開發各自的component而不互相影響，最後合併

組件使用方式

可以分成兩種

• 當組件中沒有資料要傳遞，只是單純把整個頁面放進去：<文件名稱/>

例如<MyComponent  />or <my-component />

• 有其他資料需要傳遞時：<my-component ></my-component>

全局註冊與局部註冊

全局註冊

//JS
const { createApp, ref } = Vue;
const app = createApp()
app.component('MyComponent',{
  template:`((想執行的html內容))`,
data(){
return{
}},
computed:{
}
})

//index.html

<div id="app">
<!-- 雖然重複引用但組件內容彼此獨立 -->
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

局部註冊

單一文件方式

//MyComponent.vue
<template></template>
//(一定要有)

<script>

export default{}

<style scoped></style>

//scoped:當前樣式只在當前組件中生效(local)

//App.vue

import MyComponent from"./components/MyComponent .vue"

export default {
components:{

MyComponent}

}

在本機環境下

全局註冊:在main.js當中導入

局部註冊:需要引用的時候在該文件中導入

global優點:只需註冊一次

缺點:不管有沒有使用到都會打包,相對浪費空間

當專案太大的時候無法詳細區分各組件的階層關係