前面兩天提到的元件間的資料傳遞，主要是父元件對子元件的 props 以及子元件對於父元件的 event 發送，而最後留下一個問題是假如今天我們要子元件與子元件溝通，要怎麼做呢？

第一個最快想到的方法，可能是按照前面兩天提到的方法，不斷的往上傳遞到共同的父元件，再往下傳遞到想溝通的子元件當中，但這樣的做法會耗費太多心力，並且作了很多重複的動作、難以維護等等，而這些行為也是工程師不喜歡的壞味道，要知道未卜先知跟通靈以後要維護的東西可說是工程師的另一個價值 （？

而雖然第一個方法可以達成，但實在太搞剛（台）了，因此官方也直接列了第二個方法作為標準，那就是……

上一章節中，我們介紹了父元件如何透過 props 傳遞資料給子元件，並且使用型別設定來規範傳進元件中的值，而今天要來介紹子元件要如何傳遞資料給父元件。

昨天在解說這張圖的時候，有提到了一個單向資料流的概念，Vue.js 只允許我們透過 props 來傳遞資料給 子元件，為了避免一些不可預期更改導致最後不知道是哪個子元件去更改了父元件的資料，那麼如果子元件真的有需求，想要傳遞資料給父元件的話，官方給了一個作法是 emit event 發送事件。

透過子元件發送事件給父元件，父元件的部分可以藉由監聽這個任務事件，去觸發相對應的行為，而藉由這個做法，就可以達成類似於子元件傳遞資料給父元件的行為，並且仍然是單向資料流的行為，而實際上要怎麼來發送事件以及監聽事件就一起來看看下面的範例：

這個範例中我們將會跟上一章節一樣，做一個父元件可以將資料傳遞給子元件的表單，但不一樣的事情是我們將會在子元件中新增一個按鈕，藉由點擊按鈕來觸發將我們輸入在子元件的內容資料傳遞給父元件。

單向資料流

前面章節大部分的範例都是取用元件自己本身的 data 來操作的，而實際開發時的元件最主要是用來當作一個可重複利用的樣板，裡面即使有 data 的存在，可能大部分也是用於預設值的初始化，更多時候子元件所接收到的資料，會來自於父元件所傳遞的。

而在傳遞資料時要遵守單向資料流的規定，意思是我們只能透過父元件傳遞資料給子元件，子元件並不能直接傳遞資料給父元件，這樣做的原因是當今天很有多子元件依賴父元件某項資料物件時，如果每個子元件都可以任意更改父元件的資料時，就容易造成牽一髮而動全身的行為，因此這種行為是被禁止。

前幾章花了一點時間在介紹元件的註冊方式與用法，除了能夠建立一個元件並使用對應的 <tag> 標籤建立在網頁上，也能將元件塞入其他元件當中成為他的子元件。

然而，對於真正顯示的內容，最主要還是得依靠 template 所產生，回顧一下之前生命週期的章節會發現到，Vue.js 的生命週期中，會有一段過程檢查實體中是否有包含 template 的選項：

• 若有 template 的情況：最後會使用 render function去編譯裡面的內容到網頁上。
• 若沒有 template 的情況：則是會使用綁定 el 元素的 outerHTML來做為編譯範圍。

其中 template 指的就是元件樣板的部分，我們可以透過不同的封裝方式來管理內容，例如使用 HTML 標籤來進行封裝：

父子元件

在某些情境下我們可能會在元件內使用大量重複的元素標籤以及內容，這個時候我們就可以把元件中的重複的內容再次元件化，並且作法同樣可以分為區域性與全域性。假設目前需求是把一個頁面拆分成 wrapper-header、wrapper-body 以及 wrapper-footer 元件並且在 wrapper-body 中還要再塞入其他元件：

在 HTML 部分要注意的地方是，HTML 在編譯的時候是不區分大小寫的，而在 JavaScript 中是無法使用-連字號來編寫，因此在格式上官方建議 HTML 部分採用 kebab-case 連字號命名法，而在 Vue.js 裡面採用PascalCase駝峰式命名法。

1
2
3
4
5

<div id="app">
    <wrapper-header></wrapper-header>
    <wrapper-body></wrapper-body>
    <wrapper-footer></wrapper-footer>
</div>

元件的概念可以把它看作成一個重複利用性高的程式，好比只要輸入資料進去，就能夠輸出得到對應的需求，至於其他相關的外觀樣式等等都會相應產生。而要將 Vue.js 的程式元件化之前，首先一起來瞭解它的核心觀念：

MVVM

Vue.js 的架構深受 MVVM 的影響，而 MVVM 講的也就是，M(model)、V(view)以及 VM(view-model)，官網範例中常用到的 vm 也是因此而來的。

三者之間的關係也非常簡單，前端可能會透過像是 API 取得一些後端的資料（Model），接著會撰寫 Vue.js 的部分來讓 API 資料更有邏輯或整理成更加容易讓視覺可以顯示的資料（View-Model），接著就可以使用 Vue.js 的樣板語法來讓整理好的資料顯示在畫面上（View）。

反過來則是今天當按鈕（View）的部分被使用者點擊，因此觸發向 View-Model 獲取一些資訊，而作為 View-Model 可能會直接提供自己本身就有的資料，亦或是最後再向 Model 拿取更多的資訊回來整理。

而 Vue.js 最主要是幫我們把連結 View 與 Model 的部分給處理掉了（View-Model），因此我們接下來要做的元件，最主要是要透過 Vue.js 提供的 API 等功能（也就是前面所說的指令、修飾符等等），來打造元件，並且搭配 View 與 CSS（SCSS）來塑造他的外觀。

生命週期

生命週期（如上圖）主要是在說明一個元件從生(初始化)到死(註銷)的過程，對於生命週期有良好的理解，可以更有效的運用他，譬如要在哪個階段載入 AJAX 的資料？哪個階段之後才能開始撈 data 裡的資料？為了解決這一類時機的問題，Vue.js 提供了這些時機的呼叫方式，稱之為 hook。而為了要好好地瞭解 Vue.js 的生命週期，下面透過一個簡單的範例，來捕捉各種生命週期的狀態：

data 資料

data 是用來儲存資料的地方，而 Vue.js 會透過前面介紹的樣板語法，將其對應的值輸出顯示到 DOM 上，並且最重要的是，只要一更動 data 裡面的資料，Vue.js 將會透過內部已經幫我們處理好的邏輯，去比對 HTML 哪邊需要更改，實現部分渲染，達成資料驅動畫面的概念。範例：

HTML 部分：

1
2
3

<div id="app">
    {{ a }}
</div>

JavaScript部分：

1
2
3
4
5
6
7
8
9
10

let vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: {
        b1: 'something',
        b2: 'another
    }
  }
})

修飾符

上一章節介紹到指令的部分，還蠻多的東西需要一點時間消化，而今天要來介紹一點相對簡單的東西，那就是修飾符(modifier)啦！在 Vue.js中，修飾符以半形句號(.)後綴在指令上來表示觸發事件時會另外使用什麼方法，而修飾符的種類分別有：

• 事件修飾符
• 按鍵修飾符
• 系統修飾鍵

指令（Directives）

在 Vue.js 中有提供一些帶有前綴v-的指令，指令主要放在 HTML 標籤當中，如同 HTML 屬性一樣，而我們可以透過指令去命令那些元素做事情，只要指令條件符合時，就會執行該指令的動作。而透過這些指令與上一回的樣板語法，我們可以直接在 HTML 上去綁定我們需要做的事情，以下列出幾個常用到的指令與用法：