一、導語
突然冒出四個字，分即是合，嗯，有點道理。。。。。。。。。。。。。。。。。。。。。。。
二、正文
在搞的仿淘寶demo，之前加入購物車是與商品詳情一塊的，今天把它單獨拆出來，復用性高點，那這樣的話，就涉及到了組件開發了。vue的組件注冊是超級超級容易的，接下來就簡短的說說組件吧，直接上demo了。
1、理解組件
官方對於組件的解釋是這樣的：組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。
反正我捕抓到一點 一個組件本質上是一個擁有預定義選項的一個 Vue 實例 那是不是意味着可以自定義組件？哎呀，我查了查，還真是可以!!!下面的例子就是自定義組件
2、組件的注冊
注冊組件很簡單，只要在父件中像引入文件一樣，用 import 引入，然后在 components 中注冊，就可以了。如下：
接下來就可以在html中使用，並且聲明引用了：
很好，這樣就注冊組件成功了。
3、組件之間的傳值
一個項目最重要的就是數據之間的傳遞，數據的渲染，接下來就來看看這最重要的一步。
1）、父傳遞數據於子
只需在 父 使用組件時，將參數利用 :XXX="ZZZ" 傳遞過去就行，如 :filterPro="filterPro"，而 ZZZ是參數名，而且參數名不要帶下划線。
子是通過 props 接受父傳遞過來的值，而 props 的參數名要與父傳遞過來的 ZZZ 一致。
如下:
父：
子：
ZZZ肯定是在父里的data聲明了，傳遞給子時，子就不用再聲明了，直接拿來用就可以了。
2）、子傳遞值於父
子傳遞值給父，其實思路是如此，子通過綁定事件，在事件對應的方法里利用 $emit 觸發父的方法，讓父去動態賦值。但是前提是，父也要聲明此方法，具體如下：
父：
聲明方法時格式如此 ： @XXX="ZZZ",ZZZ對應子調用的方法，XXX對應父method里對應寫的具體實行方法
父method里對應寫的具體實行方法：
子：
先通過事件調用方法的方式
子的method里使用$emit去觸發父的方法
值得注意的是，子使用 $emit() 方法的第一個參數，是父與子聯通時聲明的方法名，也就是上面講到的ZZZ，而第二個參數開始，就可以是子傳遞給父的參數名。
三、結尾
好了，到此基本說完了組件的基礎東西了，父子之前傳遞東西，不單單是$emit這個方法可以用，大家也可以找找其他方法試試。
最后給幾張效果圖，點擊“請選擇 顏色分類”會彈出第二張圖，點擊第二張圖的 關閉按鈕或者是“加入購物車”，會關閉該界面（關閉了子組件，並且子組件調用了this.$emit("sendNotice",this.demo1Checkbox),通知父組件替換掉"請選擇 顏色分類"這幾個字）
