Vue 初心者筆記 #16 註冊元件與使用

本篇文章介紹 Vue 的元件要如何註冊與使用。

什麼是元件

一個 Vue 應用程式,通常是由一個個的元件搭建而成。
元件將程式碼以封裝的方式包裝好,讓開發者能夠重複使用,可說是 Vue 相當重要的功能!

如何使用元件

使用元件前,首先要新宣告元件。
我們可以用「全域註冊」或「局部註冊」的方式來宣告元件。

全域註冊 (Registration)

  1. 使用 Vue.component('標籤名稱', {定義 template}); 來註冊一個元件。
  2. props 連接外層的資料(這邊改名 person 避免搞混)。
  3. <row-component> 也要動態綁定 person

X-Templates

x-template 的方法定義 template

  1. 元件的 template 改為 x-templateid
  2. 新增 <script type="text/x-template"></script> 並加上剛才自定義的 id
  3. 同上一小節,完成 props 的動態綁定。

這邊我們會發現,我們明明就有寫好 HTML 表格的結構,但卻還是出現跑版的狀況了,為什麼?

GITHUB

其實這是因為 HTML 的特性所導致的。
HTML 中,<tbody> 裡面放的東西必須是 <tr><td>,但是這裡我們放的是 row-component
因此,row-component 會被判定為表格外的元素,而被剔除在外,最終就導致跑版!

遇到這種狀況時,我們可以使用 is 這個方式來解決。

使用 is 掛載 template

使用 is 動態切換模板的方式,來解決 HTML 跑版的問題。

is 屬性可以解決一些特定的 HTML 標籤可能會出現的格式問題。

建立正確的 HTML 表格標籤 <tr> 後,排版就能恢復正常了。

GITHUB

最後,順便附上一個有趣的小問題:

Q:這邊的 x-templateis 都寫了 <tr>,為什麼結果卻沒有兩層 <tr> 呢?
A:因為 Vue 元件在替換時,會移除外層的元素,並將內層的元素替換進去,因此渲染結果不會有兩層 tr。

這是一個關於 Vue 元件的小知識,在這邊順便補充一下。

Props 傳遞觀念補充

由於上面這個例子,是之後常會用到的觀念,因此這邊針對它的運作多說明一些。
Props 運作步驟:

  1. 對資料 data 使用 v-for,將 item 傳給 person 做動態綁定。
  2. person 存入 props 裡面,讓元件獲得 data 的資料(例如:JSON 格式的資料)。
  3. 最後就可以在 x-template 內使用 person 加上 點記法 (dot-) 或括弧記法 (bracket notation) 來存取 JSON 資料哩。

示意圖:

imgur

局部註冊 (Local Registration)

在上個例子中,我們的 Vue Component 是註冊在所有的 Vue 應用程式下(全域註冊),因此所有的 Vue 應用程式都可以使用這個元件。

如果不想要共用這個元件,也可以使用局部註冊。

局部註冊的方法:

  1. 改為宣告一個變數(範例中取名為 child),裡面有元件的內容。
  2. 在 Vue 應用程式下新宣告一個屬性 components,在這個 components 下新增註冊剛才的元件(其他應用程式不能使用)。
  3. 調用 child 這個物件。
  4. 如果另宣告其他應用程式,但是沒有加入這個 components 屬性的話,是無法使用此元件 (row-component) 的。

最後也附上六角學院的助教 Yuko 寫的局部註冊範例

data 必須使用 function return

在 Vue 的根實體 (Root Vue Instance) 中,data 可以是 Object 或 Function 型態。

但是元件的 data 只能夠是 Function 型別,因為元件的 data 不會共用,而是每個元件都各自擁有自己的 data

每個元件的資料都是獨立的,不會互相干擾!

錯誤範例

如果直接在子元件 (Components) 觸發更改父元件 (Root) 的值,會傳來報錯訊息:

GITHUB

這段報錯訊息表示「子元件內不能修改 props 的值」,修改的值也不會同步到外層,因為父元件(像是 Root)並不知道子元件內部當前的狀態。

在此附上錯誤範例的 CodePen 連結

參考資料

  1. Vue.js: 元件 Components 簡介 - 註冊與使用 | Summer。桑莫。夏天

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。