大家都知道用vue開發對程序員來說非常棒啦！當然，其實只是因爲是現在的主流而已。
當然，對小白我來說，只覺得數據雙向綁定有用而已，哈哈哈哈哈！
最近，小白我終於，又上了一個臺階，那就是！終於肯封裝組件啦！（注意是肯不是會，因爲懶，我不管！）
以前用vue做項目的時候，遇到公共的地方，直接複製粘貼，多好！（一直都覺得複製粘貼最省事，當時的想法：複製粘貼還能多很多行代碼–>以前聽說程序員的薪水是按代碼的行數計算的，想着還可以多點money，精簡代碼的人怕不是SB喲，跟錢過不去！工作了再想想，我TM莫不是SB喲…）
雖然複製粘貼省事，我還是很喜歡的，但是隻是因爲前公司沒要求，現公司要求公共的就是要提出來。。。於是我痛苦地邁出了我沉重的步伐。因爲心裏牴觸，畢竟我什麼都不懂，什麼父組件、子組件，還有傳值什麼的，麻煩死了。
不過，好像操作一遍就知道了。。。。打臉
說正題，我封裝的是一個很小很小很小的組件 —— 一個購物車的加減數量的組件
就是這個東西，突然有點不知道該怎麼說了，我就直接貼代碼好了。。。。
先創建一個新的vue文件，我這邊叫Durations.vue，名字也叫Duration，一般我們會把封裝的組件放在一個components的文件裏面，這裏隨意，我就直接以文件名爲例了吧！
爲了方便實時看效果，建議先給文件建一個路由，直接訪問路由就好了。
哦對了，忘記說了，我是用的ant design+vue做的項目，這裏的語法也是ant design了
佈局很簡單，一個“+”號一個“-”號，再一個input框，內容如下：
其他的業務代碼可以先不用管。嗯，這裏的話，樣式也不用我貼了吧，都是很簡單的。
這樣，一個組件就算寫完了，
在其他頁面裏面需要import瞭然後在頁面註冊此組件
然後使用子組件的時候就可以直接寫像普通標籤一樣寫就可以了：
當然，光有靜態頁面肯定不行，還會涉及到業務邏輯，這個時候就開始變得複雜了（之前糾結就糾結在這裏，什麼子向父傳值啦，父向子傳值啦，父組件改變子組件的值啦之類的，就是一些值統一的問題）
所以我們還得繼續 ^ _ ^
我們先看子組件（就是你封裝的那個組件Duration，誰小誰是“子”哦 哈哈）
首先，這裏是用於購物車的，有很多行，每一行都會有一個組件，那麼，我當前點擊的是哪一行呢？子組件得有操作的數據對象吧（就是當前行了），這個數據哪裏來？當然是父組件告訴子組件啊！這個時候就會有父組件向子組件傳值的問題了。
傳值很簡單，想想你使用自帶組件要用變量的時候怎麼寫的？就是:變量名=“傳的值”，我這裏是這樣寫的
這裏的record是表格每一行對應的值
子組件接收這個值後就可以使用啦！
子組件接收父組件傳值：
前面是變量名，後面是變量對應的類型，接收完了之後，就可以直接使用它啦！
比如說我上面的onsub(tempduration)和onadd(tempduration)什麼的，直接像正常變量一樣使用！
接下來子組件把事件處理完，就該將處理結果返回給父組件繼續操作啦！
子組件給父組件傳值的方式也簡單，只需喊一聲（使用$emit傳值）：
引號內的參數爲父組件使用時的名字，相當於一個標記嘛，後面跟傳過去的數據。
父組件要使用子組件傳過來的數據的時候，就將名字拿到，自己再做處理。
接下來，就該輪到父組件接收子組件傳過來的值了，風水輪流轉哈哈哈
只需要將傳過來的那個名字前面加個@符號，後面等於一個函數就好啦！
（溫馨提示：我這裏用了箭頭函數，裏面再執行需要執行的函數，具體我也不太清楚爲什麼，但是確實，我這個地方如果直接執行後面的函數的話，會報幾個參數not defined的問題。有大神知道怎麼處理的話，麻煩請告知，小白在此謝過了！）
然後你就在父組件中用函數給處理吧！基本就這樣！
怎麼樣，是不是感覺很簡單，但又覺得很複雜 。現在我細想下來還是覺得麻煩，畢竟，我是從一個已經做好了所有功能的組件上分離出來的，要封裝組件，感覺有好多東西要重新寫（雖然之前寫好了，但是會有變化。）而且數據之間的影響，一分離開全部都需要再處理一遍。真心麻煩。
不過還好，如果哪裏有錯有問題，統一修改就好啦！各司其職有它的好處，只是分類的過程會比較麻煩而已。
另外補充一句，好像只有我這種小白，纔會覺得組件不封裝才方便吧！怪我都怪我，學習的vue知識除了知道用它的數據雙向綁定之外，好像啥都不會了…丟臉！