快捷導(dǎo)航

vue-cli對(duì)element-ui組件進(jìn)行二次封裝的實(shí)戰(zhàn)記錄

更新時(shí)間：2022年06月07日 09:09:11 作者：原鑫@博客

組件類(lèi)似于需要多個(gè)地方用到的方法,在Vue中組件就是一種復(fù)用（經(jīng)常使用）一個(gè)功能的手段,下面這篇文章主要給大家介紹了關(guān)于Vue?element?ui二次封裝的相關(guān)資料,需要的朋友可以參考下

為什么要element對(duì)進(jìn)行二次封裝？

1.element-ui組件的部分樣式不滿(mǎn)足當(dāng)前項(xiàng)目的需求。

element-ui組件的樣式是固定的，比如我們常用的那些組件，table，button，icon，tab等等。當(dāng)我們需要的樣式和element組件有偏差的時(shí)候，我們可以通過(guò)針對(duì)element組件進(jìn)行二次封裝，然后通過(guò)Vue.component（）方法，定義到全局,來(lái)解決我們當(dāng)前的項(xiàng)目需求。

2.element-ui組件出現(xiàn)問(wèn)題的時(shí)候，我們有中間鍵支持，不至于整個(gè)項(xiàng)目崩塌。

其實(shí)這種現(xiàn)象是常有發(fā)生的，比如組件由最開(kāi)始的開(kāi)源的，突然收費(fèi)了（雖然我相信ele團(tuán)隊(duì)不會(huì)的）。或者element組件庫(kù)的開(kāi)發(fā)團(tuán)隊(duì)停止了維護(hù)。組件的二次封裝都是有意義的。我們可以手寫(xiě)一個(gè)類(lèi)似的組件，或者引入其它組件，使我們的項(xiàng)目，能夠正常使用。綜上所述，如果我們基于element做的項(xiàng)目，因?yàn)閑lement出現(xiàn)了問(wèn)題，組件的二次封裝，可以有效的防止項(xiàng)目崩塌。

3.二次封裝的弊端：

因?yàn)槲覀儗?duì)element-ui進(jìn)行了二次封裝，當(dāng)element-ui組件升級(jí)的時(shí)候，我們二次封裝的組件不能直接使用element-ui的新方法，所以需要有人不斷的對(duì)組件進(jìn)行維護(hù)，有一定的開(kāi)發(fā)成本。

如何對(duì)element對(duì)進(jìn)行二次封裝？

本文全文以vue-cli和element為例，如果對(duì)vue-cli如何下載和安裝以及element-ui如何引用不了解的同學(xué)，本文對(duì)你的幫助將很小。
首先，先建立一個(gè)文件夾，table.vue是我們基于element-ui的el-table進(jìn)行二次封裝的文件，以及所在目錄如圖：

<template>
  <div class="sir-table">
    <el-table :data="showData" style="width: 100%">
      <slot></slot>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default () {
        return []
      },
      type: Array
    }
  },
  data () {
    return {
      showData: []
    }
  },
  methods: {
  },
  mounted () {
    this.showData = this.data
    console.log(this.showData)
  }

}
</script>
<style scoped>

</style>

然后，我們通過(guò)index把我們二次封裝的組件引入進(jìn)來(lái)，并給它名為為sir-table， ps：叫什么都行！

import SirTable from './table'

export default {
  install: (Vue) => {
    Vue.component('sir-table', SirTable)
  }
}

然后在main.js中引入我們二次封裝組件的index.js，并掛在全局上。

import eleconfig from './components/elecomponent/index.js'
Vue.use(eleconfig)

然后，在任意的一個(gè)文件中，掉用我們封裝好的組件

<template>
  <div class="index">
    <sir-table :data="tableData5">   //  在這里調(diào)用我們二次封裝的組件
      <el-table-column label="商品 ID" prop="id">
      </el-table-column>
      <el-table-column label="商品名稱(chēng)" prop="name">
      </el-table-column>
      <el-table-column label="描述" prop="desc">
      </el-table-column>
    </sir-table>
  </div>
</template>
<script>
export default {
  // name: 'HelloWorld',
  data () {
    return {
      tableData5: [{
        id: '12987122',
        name: '好滋好味雞蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
        address: '上海市普陀區(qū)真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味雞蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
        address: '上海市普陀區(qū)真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.index {
  width: 800px;
  margin: 0 auto;
  margin-top: 200px;
}
</style>

就這樣，一個(gè)簡(jiǎn)易的element組件的二次封裝，就完成了！

https://github.com/yuanxin666/sir-zujian

總結(jié)

到此這篇關(guān)于vue-cli對(duì)element-ui組件進(jìn)行二次封裝的文章就介紹到這了,更多相關(guān)vue-cli對(duì)element-ui組件二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: