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