組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。特別對於大型應用開發來說，盡量組件化，並且先造好輪子庫，不要重復去寫組件，這會顯著提升項目開發效率。（當然自己不想寫組件的童鞋也可以引入第三方庫）。
自己寫組件我們弄清楚以下五個問題：
1、組件是什么；
2、組件寫好了怎么在項目中使用；
3、調用組件我需要從外界獲取數據或者屬性怎么辦；
4、組件內部需要傳遞數據或者事件出去怎樣做；
5、弄清楚組件化。
下面我們用一個常用的footer組件來講解。
第一：組件是什么？
組件其實就是 .vue 文件一種另外的寫法而已，有自己的屬性（props）和方法（methods）。一下就是一個簡單底部組件。
第二：組件寫好了怎么在項目中使用？
當你自己寫了一個組件之后，要在項目中引用起來，那么此時需要注冊。全局注冊或者局部注冊，各位大俠肯定看名稱也知道，全局注冊就是只用注冊一次在項目中全局都可以用，局部注冊則是只在當前Vue文件使用。組件在注冊之后，便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例之前注冊了組件。
第三：調用組件我需要從外界獲取數據或者屬性怎么辦？
這里就涉及到父子組件之間的通訊——信息傳遞。父給子組件傳信息=》通過子組件的props（屬性），在視圖中使用的時候通過屬性的形式傳值，就按照這個footer組件來說在調用footer的Vue文件里面需要傳遞一個信息給footer組件，比如說需要父組件控制這個footer顯示還是隱藏，那么就用子組件里面定義的isShow屬性，通過視圖里面使用isShow屬性綁定一個值傳遞（如果不是綁定的值不需要前面的冒號，不然會報錯），使用方式如下：
傳入：
接收：
第四：組件內部需要傳遞數據或者事件出去怎樣做？
這其實就是子組件向父組件傳遞信息；使用$emit去觸發父組件里面通過$on綁定的事件。
父組件接收事件：
注：在Vue2.3.3版本有父子組件有雙向機制數據
第五：弄清楚組件化
就是項目中盡量組件化，避免重復造輪子，能提取成組件盡量提取！減少代碼量。