前置：在我們日常開發的時候，會發現elementUI默認的組件通常都是不滿足的，都需要根據項目更改參數去實現
問題：在團隊協作中，包括人員流動過程中，我們會發現，每個組件用的組件參數都不一樣，這會讓我們項目不夠統一
解決：
方法一：
大佬說：“簡單，我二次封裝一下。”
小菜雞，我：“怎么實現的？”
大佬：“簡單，我們通常都是做一下操作：”
import Vue from "vue" import element from "element-ui" Vue.use(element)
大佬： “現在我們改一下，改成以下：“
// 寫一個全局組件，然后Vue.component()就完事 <script> import {Input} from 'element-ui' export default { components: {'el-input': Input}, render(h) { let attrs = Object.assign( { placeholder: this.$attrs.placeholder || '', maxlength: this.$attrs.maxlength || this.$attrs.type === 'textarea' ? 200 : 20, }, this.$attrs, ) return h('el-input', { props: attrs, attrs, on: this.$listeners, }) }, } </script>
小菜雞，我：“大佬牛逼啊！！！終於不用被測試天天說沒有做長度限制了，大佬解放勞動力啊！！”
大佬：“其他的一樣可以使用。“
小菜雞，我：”element那么多組件，都得拷貝一份，然后改巴改巴，工作量好大啊！並且好多都是重復工作啊！“
大佬：”麻煩？沒事，我們換一種。“
方法二：
大佬：”講方法二前，我們必須得了解一下vue的生命周期“
小菜雞，我（舉手）：”我知道，我知道！vue有8大生命周期，巴拉巴拉…………“
大佬：”停！！！我們看看源碼，別再人雲亦雲了。看下圖：“
大佬：”常用的確實8個。但是，我們想想，我們通常引用插件，例如：elementUI。這些東西在什么時候 ‘注入’ 的？“
小菜雞，我（冒汗）：”額，娥，鵝，2……“
大佬：”好，我們再看看源碼！如下圖：“
大佬：”我們看到了initGlobalAPI方法的調用，我們到這個方法里面，根據引用在 ’global-api‘ 文件夾下面，看代碼：“
大佬：”我們先忽略其他東西，然后根據 ‘優秀的命名’ 我們猜測vue初始化了4個東西，我們現在看第一個，如下圖：“
大佬：”這里就對install進行處理了，而Vue.use就是調用install方法，聯想一下，是不是串起來了？“
小菜雞，我：”#&%???? 嗯嗯嗯嗯，我懂了。“
大佬：”算了，我們看看官方文檔。“
https://cn.vuejs.org/v2/guide/plugins.html
大佬：”看圖：“
大佬：”結合我們之前看的源碼，就知道了，插件在最早的時候就初始化了。在想一下我們項目中的main.js，一般插件的use都是在new Vue實例之前的。”
小菜雞，我：“我這次真的懂了，但是，跟我們搞elemenUI有什么關系啊？“
大佬：”搞完了這些東西，那我們來看一下我們Vue.use（element）發生了什么，無圖無真相，看圖：”
大佬：“我們看看輸出了什么。”
小菜雞，我：“哇！好多東西啊！”
大佬（無語）：“我們再打開一個我們很熟悉的，Pagination（分頁）”
大佬：“是不是很熟悉？”
小菜雞，我（嚴肅臉）：“嗯，，，，，不熟悉！”
大佬（無語）：”我們再看elementUI的官網，對比一下，看圖！！！！“
小菜雞，我（搶答）：”我懂了，我懂了。跟輸出的是一樣的，結合剛剛講的：“
1、new Vue前要執行vue.use
2、vue.use才是element被引用的時候
小菜雞，我：”意思就是說：我們在vue.use前，直接將element這個json對象的默認值改了就行了。例如：“
Element.Pagination.props.layout.default = 'total, sizes, prev, pager, next, jumper'
大佬：”沒錯，注意一下，有些返回的並不是JSON，而是Funciton"
----------轉載請注明出處-------------