簡介：

組件（Component）是 Vue.js 最強大的功能之一。

組件可以擴展 HTML 元素，封裝可重用的代碼。

組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：

組件的註冊(官網)

有兩種方式註冊Vue組件：全局註冊和局部註冊，就好像歐元和英鎊的區別，

前者可以在各Vue實例中使用，後者只能在註冊他的Vue實例或者父組件中使用。

如果在組件中使用組件，就形成了組件的嵌套，如果組件裏嵌套的組件是自己，就形成組件的遞歸。

組件由兩部分組成

一部分是需要自定義的tag-name，以下面為例，tagname是<my-component>,

另一部分是options對象，裏面包含了該組件的模板，方法，props,data等細節

全局註冊：

Vue.component(‘my-component‘, {
  // 選項
})

局部註冊：

var options={template:....}//組件的選項對象
new Vue({
el:‘#man‘,
components:{
‘my-component‘,options
}
});

props,events,slots

下面說說我覺得組件中的三個重點：prop，events和slots。當我看到組件這部分時，之前沒有接觸過mvvm類型的框架，

所以到這裏感覺是極限了，這時，找到熟悉的事物作類比是一個好辦法。如果把組件比成一間房子，上面的三只就是房子用來和外界通信的門窗。

在開始之前：應該記住一張圖和一句話：

這張圖對應的意思是：父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。

1.自定義事件

想象一個場景。2048遊戲裏面，兩個子組件中的數據合並了，產生一個addscore事件，需要通知父組件容器，這時，就可以用自定義事件了：

//父組件中

<father v-on:addscore="addscore"></father>
function addscore(){
this.score++;
}

//子組件中

this.$emit(‘addscore‘);

註意 ，在子組件中，子組件只負責觸發這個自定義事件，通過$emit方法來觸發，而在父組件中則定義事件觸發之後的回調函數。好吧，其實vue官方教程的兩個button觸發add事件看起來是個更好的例子。。。。

2.props

再想象一個場景，2048中，父組件中的data中有一個定義了所有card的值的數組，現在要把這些值傳到每一個card中，這時就用到props:

//爹組件

//在模板中，為子組件寫一個自定義屬性card，用來把cardNum傳給子組件
<children :card="card_num"></children>

data:{card_num:8}

//****子組件中******

<div>{{card}}</div>

在組件的props字段中加入子組件的自定義屬性
{
data:....
computed:....
props:{card:null}
}

其實理解起來很簡單，vue的子組件對父組件來說被包裝成為一個類似於<children></children>的標簽，正如你在父組件中看到的那樣。但是vue為我們留了一個props屬性，就像上帝給人類五官用來感受世界一樣，組件用props和自定義事件用來和父組件傳遞消息。

這也是一種封裝，對父組件隱藏了內部的實現，只留下了props作為接口。接口在現實世界也很常見，比如顯示器對主機的接口，你不必管顯示器的內部實現，只要知道接上主機就能顯示信息了就行。

3.slots

如果你了解過es6的模板字符串，那麽理解起這個來將毫不費勁。我當時可是被這個slots搞得稀裏糊塗的。。。當然當時不知道模板引擎，也不知道模板字符串。slots就是在組件中插入內容的機制。

在<p>等原生的標簽裏插入內容很簡單，就直接寫就行了（說了一句廢話），而在組件中寫入內容就有講究了，比如<children>我還是個寶寶</children>,

由於組件的模板一般是一堆原生標簽一起構成的，那麽上面這麽寫，究竟應該把內容插到那個元素中就成了問題。於是就有了<slot></slot>元素。

solt元素就是用來接受父組件放到子組件的內容的。不知為什麽，到了這裏我會想起學習機上插遊戲卡的例子。。。舉個例子：

//學習機組件
<div>
  <h2>小霸王學習機</h2>
  <slot>
    內置魂鬥羅
  </slot>
</div>

　最後得到的就是小學生愉快的玩雙截龍了

<div>
  <h1>我要玩遊戲</h1>
-------------------------------組件區域——————————————
  <h2>小霸王學習機</h2>
————————slot區域——————————————
    <p>插入雙截龍遊戲卡</p>//插入的內容
</div>

當父組件不往子組件標簽中添加任何字符時，子組件會顯示默認內容，如果有的話，也就是說魂鬥羅。。

具名slot是說組件中有大於一個地方需要插值時，需要給slot取個名字。就像電腦的接口，有usb的，也有接投影的HDMI接口，為的是將多條內容放到正確的地方。我們知道，在組件內部，this指向組件自己，那麽組件的slot內容可以通過this.$slots獲得被插入的vnode節點。

動態組件

動態組件就是為了適應頁面的局部刷新而生的，舉個我用過的例子：todolist在線小demo

當我點擊寫日記button時，頁面會變成一個markdown編輯器界面。這就是動態組件。實現的代碼如下

methods: {
            toggleview: function() {
                this.currentview = (this.currentview == ‘todolist‘) ? ‘write‘ : ‘todolist‘;
            }
        },

當我點擊上面的button時，觸發toggleview方法，導致is綁定的組件名發生變化，如果當前是write組件，那麽變成todolist組件。那麽<keep-alive>標簽又有什麽用呢？標簽字面意思是活著。。就是當todolist組件由顯示變成隱藏時，

組件的數據狀態會被保存下來而不是被完全destory，當組件由隱藏再次變為顯示時，當前的狀態得以保留。比方你在write組件中寫一段md文檔，然後切換回todolist組件，如果沒有keep-alive組件，再切換回write組件時，之前編輯的東西就會丟失。

#與自定義元素的關系

你可能已經註意到 Vue 組件非常類似於自定義元素——它是 Web 組件規範的一部分，這是因為 Vue 的組件語法部分參考了該規範。例如 Vue 組件實現了 Slot API 與 is 特性。但是，還是有幾個關鍵差別：

1. Web 組件規範仍然處於草案階段，並且尚無瀏覽器原生實現。相比之下，Vue 組件不需要任何補丁，並且在所有支持的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時，Vue 組件也可以包裝於原生自定義元素之內。

2. Vue 組件提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流，自定義事件通信以及構建工具集成。

vue.js組件（component）