vue2.0 如何自定義元件（vue元件的封裝）

一、前言

    之前的部落格聊過 vue2.0和react的技術選型；聊過vue的axios封裝和vuex使用。今天簡單聊聊 vue 元件的封裝。

    vue 的ui架構現在是很多的，但是鑒于移動裝置的複雜性，相容性問題突出。像 Mint-UI 等說實話已經很不錯了，但是坑也是不少，而且項目中很多功能僅憑這些也實作不了，這需要我們去封裝自己的可複用元件。

二、封裝元件的步驟

　　1.  建立元件的模闆，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。　　　　os：思考1小時，碼碼10分鐘，程式猿的準則。

　　2.  準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料、類型。(後面詳解)

　　3.  準備好元件的資料輸出。即根據元件邏輯，做好要暴露出來的方法。（後面詳解）

　　4.  封裝完畢了，直接調用即可。

  接下來以一個很簡單的例子具體說明一下

  現在先看一下demo的效果圖

三、代碼詳解

　　1. 先說一下 props

　　　　我們在父元件中需要将子元件需要的資料導入，用法如下：

　　　　:searchList="searchList"  就是我們的資料，這個可以寫多個。這裡我傳輸了2個參數過去，主要是做資料修改的說明。大家可以先忽略。

　　　　在子元件中，我們的接收和使用方法如下：

　　　　我們在 props 中接收資料，注意props對象裡面 鍵值 是對改資料的 資料類型 的規定。做了規範，使用者就隻能傳輸指定類型的資料，否則報警告

　　　　而props對象中的資料，我們可以直接在目前元件中使用  this.searchList，可以直接使用。這裡要強調一下，props傳過來的資料隻做展示，不得修改，想修改，再新寫一個data中的變量承接做資料的再處理。至于原因，同上，可以看一下js的原型。至于原理嘛，不懂的可以取腦補一下 js的原型 。　　　　os：這些基礎，在這就不做詳述了。

　　　　以上就是props傳遞過來的資料的使用了。

　　2. emit的使用(如何暴露元件方法)

　　　　我們已經會使用 父元件向子元件傳資料了，那如子元件如何來修改父元件的資料呢？

　　　　這裡提供 2 種實作方法，但是 第一種不推薦，強烈不推薦

　　　　方式一：

　　　　即，父元件将 對象 資料傳遞給子元件，子元件直接修改props過來的對象的值

　　　　可以實作，感覺是一個比較快捷的方式。但是不推薦，這種方式寫多了，容易出錯，特别是多層元件嵌套的時候。這種修改對代碼的疊代和錯誤的捕捉都不友好，是以建議大家别這樣寫。

　　　　他的實作原理簡單提一下： 這個對象、數組啦，是引用資料類型，說白了，就是存儲單元的資訊是指針，真正資料在别的地方，通過指針查詢的資料，是以這樣寫，對浏覽器來說僅僅是傳遞了一個指針，資料還是同一份資料。是以你能修改。

　　方式二：

　　　　正兒八經的通過 $emit 方法去掉父元件的方法，在父元件中修改data的資料。（根正苗紅的方法，規範寫法）

　　　　将父元件的方法注入子元件  @selectFunc="selectFunc" ，然後在子元件中通過 $emit 調用他，并傳遞參數。達到修改的目的。

四、 demo代碼

父元件：

子元件：

五、 總結

　　這裡主要是總結一下vue元件封裝的思路，幫大家梳理一下。很簡單，和jQuery插件、react元件一樣，所有元件都是一個套路，就是 函數思想。

　　元件就是台做烤腸的機器，我放進去豬肉，再按一下各種開關，然後你給我烤腸。

　　　　1. 定義好 你需要使用者傳入的資料

　　　　2. 定義好 你提供給使用者的方法

　　　　3. 寫好元件的内部邏輯

　　這就OK了，一個完美的，可複用的元件就完成了。    os： 在此吐槽一下，那些自認為是優秀的元件，其實，别人拿着是沒法用的。 o(╥﹏╥)o 

　　os： 願大家工作過程中能規範程式設計習慣，一起為前端代碼大社群做貢獻。

注：

  os:  2018/06/06

　　鑒于一些朋友的評論，我在這再做一些解答哈，這個言論往深了去不保證準确性，我盡量吧。有問題的地方還是希望大家及時指出。

　　1.  父子元件通信的方式，遠不止我說的那兩種。但是，通過 $emit 的方式是根正苗紅的，不帶任何差錯的，是封裝優秀元件最好的方式()

　　（1） 通過ref 通信

　　　　　　父元件設定ref，通過$refs對象來擷取子元件的資料

　　

　　　　　　  其實，很簡單。ref 就是直接擷取了你的dom節點，如果是div一類的基本dom和js的document.getElementsByTagName()效果一樣的，而且這樣節省開銷。你可以在父元件中直接 this.$refs.refTest3.selectValue.data。直接擷取子元件data中的資料，或者别的資料都可以擷取。但是，這個不是我們封裝元件會用的東西，因為這個用在父元件。元件的思想是 獨立的。是以，大家平時用用就好了，如果要封裝可複用的元件，這個還是不實用的。  os：可能他有特殊用法是我不清楚的，如果有請大家分享

　　（2）通過 vuex 通信

　　　　　　vuex 大家都知道，變量統一管理(友善的很)，╮(╯▽╰)╭  但是用這個來封裝元件的完全就是擡杠了。vuex、redux等等這些都是針對元件多層傳輸資料不便，而做的狀态統一管理，說白了是針對大家都要用的資料才會放到vuex中，而元件思想，是封裝一個獨立的、可複用的功能子產品。這根本就是2個理念。希望大家不要被誤導。

　   （3）.aync 父子元件資料雙向綁定

 　　　　　　 說實話，這也是來擡杠的。說白了，雙向綁定不還是 通過  $emit 監聽資料更新事件，來調用父元件的方法嗎？

　　　　　　 這裡簡單說一下這個資料雙向綁定的，還是很常用的方法。不啰嗦，看代碼：

　　　　　　其實，很簡單。在父元件向子元件props資料的時候，加一個  .sync  修飾符，然後在子元件顯示的調用 emit 來修改他。   說白了就是添加這樣的一個事件綁定  @update:foo="val => bar = val">

　　　　　　上述的方法就是  父子元件資料雙向綁定。子元件實時修改  props 的方法。

　　　　歡迎大家提出别的問題和建議