元件化是Vue.js的重要組成部分。對於一個工程量很大的專案，元件化是重中之重。

剛剛入手Vue，感覺Vue的元件化非常棒。

主要是記錄下自己學的過程中遇到的問題與解決。

構成元件：

元件意味著協同工作，通常父子元件會是這樣的關係：元件 A 在它的模版中使用了元件 B 。它們之間必然需要相互通訊：父元件要給子元件傳遞資料，子元件需要將它內部發生的事情告知給父元件。然而，在一個良好定義的介面中儘可能將父子元件解耦是很重要的。這保證了每個元件可以在相對隔離的環境中書寫和理解，也大幅提高了元件的可維護性和可重用性。

在 Vue.js 中，父子元件的關係可以總結為 props down, events up

這是官方文件的教程。

下面舉具體的例子。

用props傳遞資料。

首先你要先建立一個自定義標籤。

Vue.component('child5', {
  // 宣告 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 例項中像 “this.message” 這樣使用
  template: '<span>{{ message }}</span>'
})

我建立了一個child5的標籤。

props用來傳遞資料。

template作為一個模板。結果是span標籤會替代child5標籤。

然後new一個Vue出來。

new Vue({
  el:"#app-992",
  data:{
    message:"haha"
  }
})

下面貼到html程式碼。

<div id="app-992">
  <input v-model="message">
  <br>
  <child5 :message="message"></child5> 
</div>

可以看到用v-model與child5標籤建立關係。:message是v-bind:message的縮寫。

如果看過Vue的同學應該知道。

<input v-model="message">

<child5 :message="message"></child5> 

裡面的”message“是互相繫結的，也就是說只要他倆一樣就行，無所謂你取什麼名字，而這兩個message指的是new出來的Vue裡的message也就是message：“haha”。

可能大家有點暈。我們可以給他解耦一下。假如沒有child5這個標籤，假如只是一個普通的p標籤：

<div id="app-998">
  <textarea v-model="message" placeholder="點選我"></textarea>
  <p style="white-space: pre">message is:{{message}}</p>
</div>

new Vue({
  el:"#app-998",
  data:{
    message:""
  }
})

結構非常清晰，你在textarea裡輸入什麼，下面的p標籤就會顯示什麼。同理，這個message取什麼名字，對應的是如上所說的地方。然後就是我們自定義的標籤child5，props用來傳遞資料，傳遞給

<span>{{ message }}</span>'

所以props裡面的message就是這個message，而這個message在html裡就是child5裡面：message這個了。這個相當於一個小元件，把他整合到div裡。其實他與div沒半毛錢關係。你可以想象把一個輪播圖放到一個div裡面。然後唯一有關係的是資料的傳遞，你結合這句程式碼：

<child5 :message="message"></child5> 

你定義的標籤的message的值 是“message”，“message”的值 就是你自己new出來的 Vue裡面那個message的值，這樣就聯絡起來了。

自己瞎寫瞎總結的，望各位看官手下留情，歡迎批評指正！