為什么要進(jìn)行組件封裝？

封裝的目的就是為了能夠更加便捷、快速的進(jìn)行業(yè)務(wù)功能的開發(fā)。組件（component）是vue的最強(qiáng)大功能之一，組件可以實現(xiàn)一些類似功能的復(fù)用及與其它業(yè)務(wù)邏輯的解耦。在開發(fā)中，我們難免會寫很多類似的、重復(fù)的代碼，有時候兩個業(yè)務(wù)模塊有相似的功能，采用復(fù)制粘貼已經(jīng)很省事，但如果涉及的字段或有一些小差別，你也會覺得很煩，畢竟你要從頭到尾瞅著去改動。這時候如果把那些相同的功能，抽象出來抽離成組件，通過組件引用方式就會顯得格外省事了。

Vue中怎么封裝一個自己的組件

想要封裝好一個組件，必須要熟練掌握的三個技能：1.父組件傳值到子組件（props） 2.子組件傳值到父組件（$emit）3.插槽使用（slot）。對于一個獨立的組件，props是用來為組件內(nèi)部注入核心內(nèi)容；$emit用來使這個組件通過一些操作來融入其它組件中。

使用Vue做開發(fā)，想必你一定會使用vue-cli這個腳手架，同時想必你一定會使用element-ui這個大名鼎鼎的前端框架。本文就以vue-cli來介紹一下怎么封裝自己的組件。下面就以后續(xù)要介紹的一個封裝的組件為例，來為大家介紹：

1.首先，可以看到前端工程下有一個components目錄，在components下新建一個文件夾xx-button，再在xx-button下創(chuàng)建一個index.vue文件，如圖：

2.然后在index.vue中寫自己的代碼。為了規(guī)范，注意代碼中的name命名XxButton，以后使用的組件就是XxButton：

<template>
 <el-button-group>
  <el-button v-for="(btn,index) in this.buttons" :key="index" :type="btn.type ? btn.type:'primary'"
   :icon="btn.icon" :size="btn.size?btn.size:'mini'" @click="btn.click">{{btn.label}}</el-button>
 </el-button-group>
</template>
 
<script>
export default {
 name: 'XxButton', // 注意這里的name命名，就是你以后封裝好后使用的組件名
 props: {
  buttons: {
   type: Array,
   required: true
  }
 }
}
</script>

3.然后在components下還有一個index.js文件，咱們要在index.js中注冊上自己定義的組件：

import XxButton from './xx-button'
 
Vue.component(XxButton.name, XxButton)

如圖所示：

注意：這個index.js也一定要在main.js中引入，不然就無法使用。當(dāng)然，你也可以直接在main.js中直接注冊組件，這里為了便于組件的統(tǒng)一管理，就在components下建了一個index.js來統(tǒng)一注冊組件。

4.最后，在頁面開發(fā)中，就可以愉快的使用我們注冊的組件啦。

this.buttons的定義如下：

對element-ui組件進(jìn)一步封裝介紹

以上是對怎么封裝自己的組件做了一個簡單的demo介紹，后續(xù)我將會對工作中經(jīng)常使用的組件進(jìn)行封裝介紹，主要針對element-ui做二次封裝，由淺入深，先介紹一些簡單的比如：按鈕組件封裝、分頁組件封裝、詳情頁面封裝、Dialog對話框封裝，然后對Form表單封裝、簡單表格封裝，最后結(jié)合前面封裝的組件再封裝一個功能齊全的組件。當(dāng)然在實際開發(fā)中，并不是所有的業(yè)務(wù)功能完全與組件功能契合，這就需要組件具有更多的擴(kuò)展性，后續(xù)的內(nèi)容中也會對組件封裝過程中怎么提高擴(kuò)展性做介紹。

以上所述是小編給大家介紹的vue element-ui之怎么封裝一個自己的組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論