一、前言
之前的部落格聊過 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物件裡面 鍵值 是對改資料的 資料型別 的規定。做了規範，使用者就只能傳輸指定型別的資料，否則報警告mounted() ,
而props物件中的資料，我們可以直接在當前元件中使用 this.searchlist，可以直接使用。這裡要強調一下，props傳過來的資料只做展示，不得修改，想修改，再新寫乙個data中的變數承接做資料的再處理。至於原因，同上，可以看一下js的原型。至於原理嘛，不懂的可以取腦補一下 js的原型 。 os：這些基礎，在這就不做詳述了。
以上就是props傳遞過來的資料的使用了。
2. emit的使用(如何暴露元件方法)
我們已經會使用 父元件向子元件傳資料了，那如子元件如何來修改父元件的資料呢？
這裡提供 2 種實現方法，但是 第一種不推薦，強烈不推薦
方式一：
selectvalue: ,即，父元件將 物件 資料傳遞給子元件，子元件直接修改props過來的物件的值。。。。。。。。。。。。。。。
this.selectvalue.data = '我被修改了'
他的實現原理簡單提一下： 這個物件、陣列啦，是引用資料型別，說白了，就是儲存單元的資訊是指標，真正資料在別的地方，通過指標查詢的資料，所以這樣寫，對瀏覽器來說僅僅是傳遞了乙個指標，資料還是同乙份資料。所以你能修改。
方式二：
正兒八經的通過 $emit 方法去掉父元件的方法，在父元件中修改data的資料。（根正苗紅的方法，規範寫法）
// 子元件將父元件的方法注入子元件 @selectfunc="selectfunc" ，然後在子元件中通過 $emit 呼叫他，並傳遞引數。達到修改的目的。this.$emit('selectfunc', value)
// 父元件
selectfunc(value)
四、 demo**
父元件：
子元件：
}五、 總結這裡主要是總結一下vue元件封裝的思路，幫大家梳理一下。很簡單，和jquery外掛程式、react元件一樣，所有元件都是乙個套路，就是 函式思想。}暫無資料
元件就是臺做烤腸的機器，我放進去豬肉，再按一下各種開關，然後你給我烤腸。
1. 定義好 你需要使用者傳入的資料
2. 定義好 你提供給使用者的方法
3. 寫好元件的內部邏輯
這就ok了，乙個完美的，可復用的元件就完成了。 os： 在此吐槽一下，那些自認為是優秀的元件，其實，別人拿著是沒法用的。 o(╥﹏╥)o
注：
os: 2018/06/06
1. 父子元件通訊的方式，遠不止我說的那兩種。但是，通過 $emit 的方式是根正苗紅的，不帶任何差錯的，是封裝優秀元件最好的方式()
（1） 通過ref 通訊
父元件設定ref，通過$refs物件來獲取子元件的資料
.......其實，很簡單。ref 就是直接獲取了你的dom節點，如果是div一類的基本dom和js的document.getelementsbytagname()效果一樣的，而且這樣節省開銷。你可以在父元件中直接 this.$refs.reftest3.selectvalue.data。直接獲取子元件data中的資料，或者別的資料都可以獲取。但是，這個不是我們封裝元件會用的東西，因為這個用在父元件。元件的思想是 獨立的。所以，大家平時用用就好了，如果要封裝可復用的元件，這個還是不實用的。 os：可能他有特殊用法是我不清楚的，如果有請大家分享console.log(this.$refs.reftest3)
console.log(this.$refs.reftest3.selectvalue.data)
（2）通過 vuex 通訊
vuex 大家都知道，變數統一管理(方便的很)，╮(╯▽╰)╭ 但是用這個來封裝元件的完全就是抬槓了。vuex、redux等等這些都是針對元件多層傳輸資料不便，而做的狀態統一管理，說白了是針對大家都要用的資料才會放到vuex中，而元件思想，是封裝乙個獨立的、可復用的功能模組。這根本就是2個理念。希望大家不要被誤導。
（3）.aync 父子元件資料雙向繫結
說實話，這也是來抬槓的。說白了，雙向繫結不還是 通過 $emit 監聽資料更新事件，來呼叫父元件的方法嗎？
這裡簡單說一下這個資料雙向繫結的，還是很常用的方法。不囉嗦，看**：
.........其實，很簡單。在父元件向子元件props資料的時候，加乙個 .sync 修飾符，然後在子元件顯示的呼叫 emit 來修改他。 說白了就是新增這樣的乙個事件繫結 @update:foo="val => bar = val">this.$emit('update:synctest', value)
上述的方法就是 父子元件資料雙向繫結。子元件實時修改 props 的方法。
vue2 0 如何自定義元件（vue元件的封裝）
一 前言 之前的部落格聊過 vue2.0和react的技術選型 聊過vue的axios封裝和vuex使用。今天簡單聊聊 vue 元件的封裝。vue 的ui框架現在是很多的，但是鑑於移動裝置的複雜性，相容性問題突出。像 mint ui 等說實話已經很不錯了，但是坑也是不少，而且專案中很多功能僅憑這些也...
vue2 0 自定義 提示框（Toast）元件
1.自定義 提示框 元件 src components toast index.js 自定義 提示框 toast 元件 var toast var showtoast false,儲存toast顯示狀態 showload false,儲存loading顯示狀態 toastvm null,儲存toas...
Vue 2 0學習筆記 自定義指令
在vue中為了更好的操作dom元素，其內建了一些指令，比如v model v if v show v text v html v for和v bind等。除此之外，vue也允許註冊自定義指令 建立自定義指令，在vue中乙個指令定義物件可以提供下面幾個鉤子函式，而這幾個鉤子函式都是可選的 bind 只...