迄今為止做的最大的 Vue 項目終於提交測試，天天加班的日子終於告一段落。。。
在開發過程中，結合 Vue 組件化的特性，開發通用組件是很基礎且重要的工作
通用組件必須具備高性能、低耦合的特性
為了滿足這些特性，開發的時候有很多需要注意的地方，這里我和大家分享一下我的心得
一、數據從父組件傳入
為了解耦，子組件本身就不能生成數據。即使生成了，也只能在組件內部運作，不能傳遞出去。
父對子傳參，就需要用到 props，通常的 props 是這樣的：
但是通用組件的的應用場景比較復雜，對 props 傳遞的參數應該添加一些驗證規則
對於通過 props 傳入的參數，不建議對其進行操作，因為會同時修改父組件里面的數據
// vue2.5已經針對 props 做出優化，這個問題已經不存在了
如果一定需要有這樣的操作，可以這么寫：
為什么不直接寫 let myData = this.data 呢？
因為直接賦值，並不能解除雙向綁定。改變 myData 的時候，會改變 this.data，父組件的 data 也會變
而通過 JSON 轉換之后，就能任性的操作了
二、在父組件處理事件
在通用組件中，通常會需要有各種事件，
比如復選框的 change 事件，或者組件中某個按鈕的 click 事件
這些事件的處理方法應當盡量放到父組件中，通用組件本身只作為一個中轉
這樣既降低了耦合性，也保證了通用組件中的數據不被污染
關於 $emit 的具體寫法，可以參考《 Vue 爬坑之路（二）—— 組件之間的數據傳遞》
不過，並不是所有的事件都放到父組件處理
比如組件內部的一些交互行為，或者處理的數據只在組件內部傳遞，這時候就不需要用 $emit 了
三、記得留一個 slot
一個通用組件，往往不能夠完美的適應所有應用場景
所以在封裝組件的時候，只需要完成組件 80% 的功能，剩下的 20% 讓父組件通過 solt 解決
關於 slot 的具體用法，可以參考我的博客 《 Vue 爬坑之路（五）—— 組件進階 》
上面是一個通用組件，在某些場景中，右側的按鈕是 “處理” 和 “委托”。在另外的場景中，按鈕需要換成 “查看” 或者 “刪除”
在封裝組件的時候，就不用寫按鈕，只需要在合適的位置留一個 slot，將按鈕的位置留出來，然后在父組件寫入按鈕
開發通用組件的時候，只要不是獨立性很高的組件，建議都留一個 slot，即使還沒想好用來干什么
四、不要依賴 Vuex
《 Vue 爬坑之路（四）—— 與 Vuex 的第一次接觸》
父子組件之間是通過 props 和 自定義事件 來傳參，非父子組件通常會采用 Vuex 傳參
但是 Vuex 的設計初衷是用來管理組件狀態，雖然可以用來傳參，但並不推薦
因為 Vuex 類似於一個全局變量，會一直占用內存
在寫入數據龐大的 state 的時候，就會產生內存泄露
當頁面刷新的時候，Vuex 會初始化，同時也會丟失編輯過的數據
如果刷新頁面時需要保留數據，可以通過 url 或者 sessionstorage 保存 id，然后 ajax 請求數據
五、合理運用 scoped 編寫 CSS
在編寫組件的時候，可以在 <style> 標簽中添加 scoped，讓標簽中的樣式只對當前組件生效
但是一味的使用 scoped，肯定會產生大量的重復代碼
所以在開發的時候，應該避免在組件中寫樣式
當全局樣式寫好之后，再針對每個組件，通過 scoped 屬性添加組件樣式