vue組件（Vue+webpack項目實戰系列之三）

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。特別對於大型應用開發來講，儘可能組件化，而且先造好輪子庫，不要重複去寫組件，這會顯著提高項目開發效率。（固然本身不想寫組件的童鞋也能夠引入第三方庫）。

本身寫組件咱們弄清楚如下五個問題：

一、組件是什麼；

二、組件寫好了怎麼在項目中使用；

三、調用組件我須要從外界獲取數據或者屬性怎麼辦；

四、組件內部須要傳遞數據或者事件出去怎樣作；

五、弄清楚組件化。

下面咱們用一個經常使用的footer組件來說解。

第一：組件是什麼？

組件其實就是 .vue 文件一種另外的寫法而已，有本身的屬性（props）和方法（methods）。一下就是一個簡單底部組件。

第二：組件寫好了怎麼在項目中使用？

　　當你本身寫了一個組件以後，要在項目中引用起來，那麼此時須要註冊。全局註冊或者局部註冊，各位大俠確定看名稱也知道，全局註冊就是隻用註冊一次在項目中全局均可以用，局部註冊則是隻在當前Vue文件使用。組件在註冊以後，即可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例以前註冊了組件。

第三：調用組件我須要從外界獲取數據或者屬性怎麼辦？

　　這裏就涉及到父子組件之間的通信——信息傳遞。父給子組件傳信息=》經過子組件的props（屬性），在視圖中使用的時候經過屬性的形式傳值，就按照這個footer組件來講在調用footer的Vue文件裏面須要傳遞一個信息給footer組件，好比說須要父組件控制這個footer顯示仍是隱藏，那麼就用子組件裏面定義的isShow屬性，經過視圖裏面使用isShow屬性綁定一個值傳遞（若是不是綁定的值不須要前面的冒號，否則會報錯），使用方式以下：

　　傳入：

 

 

　　接收：

第四：組件內部須要傳遞數據或者事件出去怎樣作？

　　這其實就是子組件向父組件傳遞信息；使用$emit去觸發父組件裏面經過$on綁定的事件。

父組件接收事件：

注：在Vue2.3.3版本有父子組件有雙向機制數據

第五：弄清楚組件化

就是項目中儘可能組件化，避免重複造輪子，能提取成組件儘可能提取！減小代碼量。