#3 元件系統 30天學會 vue系列文 | seansie blog

Feb 6, 2025

何謂元件抽象的超能力

常常有人覺得抽象不好，覺得抽象=難，例如像是數學題目很抽象，其實這是天大的誤解，抽象實質上是讓事物變簡單，因為他用虛擬的簡單概念隱藏了真實的複雜性。

舉例來說，你現在正在閱讀這篇文章，你肯定感覺上網瀏覽網頁不難吧。

這就是得意於瀏覽器，作業系統，還有網路協定幫你提供的抽象使用者見面(就是你眼前看到的UI 按鈕選單)，幫你隱藏了非常晦澀難懂的細節。

反而只專心在重點，像是你想要去哪個網站，而不在乎不重要且瑣碎的細節，例如怎麼傳送 http請求啦，js程式碼怎麼解析啦，怎麼用gpu做硬體加速之類的，非專業人士基本上聽不懂的細節，這些都是由抽象介面自動完成的

有句英文諺語叫做天才熱愛簡潔，白癡熱愛複雜 (**A genius admires simplicity, an idiot admires complexity)，**很好的點出了抽象的好處。

同理，vuejs的元件就是抽象網頁元素的一種方式，他隱藏了裡面的複雜性，只專心在重點上。

vuejs中的元件

大家在網頁設計的時候，處理成千上萬的標籤，常常會迷失自我，搞到不知道在幹嘛，這個時候就應該問自己 重點在哪裡?

舉例來說，選單的重點是甚麼，不就是裡面的選項嗎?

其他樣式每個選項都一樣吧，顯然不是重點，這個可以透過抽象介面來把它隱藏起來。

題外話，這樣的好處還有如果想要修該按鈕樣式的時候，只要對抽象介面修改一次就好，省時省力，如果不用恐怕要逐項修改，不僅繁雜還易錯。

而vuejs的抽象介面就是元件可以把一些負責相同功能的標籤樣式js，封裝成一個元件(黑箱子)，然後僅留下幾個跟外部互動的介面，用來處理重點的事情。

而元件使用方法就是 <元件名屬性1=? 屬性2=? ... 屬性n=?> <元件名/> 。

如果沒有使用這層元件抽象，光是實現一個簡單的選單，恐怕要處理成千上萬的標籤了。

不過有了元件只要輸入以元件名為名的標籤，就可以使用由眾多標籤組成的功能了。

對了，你有看到上面有屬性嗎，這是vue元件常用的 介面， 也就是前文所提到的重點事物的互動窗口。

舉例來說，像選單的重點就是裡面的選項對吧，那我透過這個傳入兩個陣列一個是選項名稱，另一個是選項名稱對應的網址，那這個元件標籤可以這樣寫

<選單 :名稱=namArr :網址=URLarr></選單>

注: 如果要綁定 data() 中的資料需要在屬性前面加上 : 。

這個在 vuejs 中有專有名詞，叫做prop ，直譯為屬性，不過本文通常會叫他的英文避免混淆。

這個之後會介紹

元件使用介紹

剛剛在第二章已經介紹了 .vue 的SCF(單一元件檔案)了，那我就透過這些基礎來示範吧。

vue元件其實大致上有兩種類別

主元件 : 是要被掛載在 div標籤上的元件，是裡面最大的元件，存在項目資料夾的src目錄之下，有點像是老闆。
其他元件 : 是要被主元件或其他元件使用的元件，存在項目 /src/components 目錄之下，有點像是員工。

那怎麼使用呢?

要使用元件，必須在元件的使用者(也是元件，可以類比成程式語言的語言的函數呼叫函數)中的元件邏輯中註冊，註冊方法如下，在該元件 .vue 檔案中的 script 標籤中新增

import myComp from './components/myComp.vue
export default{
	components:{
	    myComp // 將 myComp 註冊為元建，名稱可自訂，但建議與 import 的變數名稱相同

	}
}

注意!!

元件名稱不能跟html的所內建標籤名稱相同，例如不能把元件命名成 <p> <article> 這種 HTML已經有的標籤名稱，不然會有不可預期的錯誤。

然後因為”被使用”跟”使用別人”這兩個詞彙真的很拗口且容易讓人誤會，因此筆者不會使用者種方式來敘述而是會用 “母元件” 跟 “子元件” 來稱呼，而母元件使用子元件(（母元件使用子元件，即子元件被包含在母元件中，如同員工到公司任職）。

母元件程式碼

// 母元件程式碼
<template>
	<childComp> slot </childComp>
</template>

這樣經過 vuejs 處理過後，就會變成

<template>
	<childComp> 
		子元件的模板(template)內容 中略
	</childComp>

馬上就恢復原狀了，子元件內的內容完好如初! 這樣比直接複製貼上更有效率了!!

樹狀元件概念

對於 VUEJS 的元件系統，也可以把他理解程樹狀的，最上面當然是主元件，是必須透過 main.js 掛載到 div#id 上面的，而子元件間接的透過子元件標籤掛在母元件上，所以子元件不需要掛載，已經透過母元件一次達成了。

也就像一家公司，只要老闆帶頭上市一次就好，不用每個員工都去上市。

而通常網頁的元件系統會長成這樣。

app
	nav(導航)
		menu(主選單)
		search(搜尋)
		notification(通知)
		account(帳號)
	article (文章)
		post(推文)
			image(圖片)
			react(回應)
				like(讚)
				comment(留言)
				share(分享)
			comment-list(留言清單)
				comment-single-recursive(遞迴版單一留言，因為留言是樹狀的) 
			loader(讀取圖示)
	side (側邊欄)
		tools(工具欄)
	footer (註腳)

其中縮排的意思代表母元件根子元件的從屬關係

母元件
	子元件

元件資料流

稍微起後一下，元件資料流的概念在 vuejs 中是非常重要的，也就是資料流向是有指定的，不可以亂流，因為這個可以降低軟體的複雜度。舉例來說，馬路上因為有紅綠燈管理車流方向才不會造成亂象，同理，元件間的通訊也要有標準，才不會發生混亂，之後會於 prop 跟 emit 等等觀念重新提及。

何謂元件 抽象的超能力