這篇文章給大家分享的是有關(guān)vue element-ui之如何封裝一個(gè)自己的組件的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)專注于中小企業(yè)網(wǎng)站建設(shè)、策劃制作、運(yùn)行維護(hù)，主要提供一站式的企業(yè)網(wǎng)站建設(shè)服務(wù)。建站類型：公司網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站制作獨(dú)立站等。創(chuàng)新互聯(lián)不是單一的建網(wǎng)站，而是結(jié)合企業(yè)的建站目標(biāo)去規(guī)劃網(wǎng)站怎么建，如何利于運(yùn)營(yíng)，尋求適合的建站方案。其次，網(wǎng)站后臺(tái)操作的便捷性也是網(wǎng)站制作過(guò)程中的重點(diǎn)，創(chuàng)新互聯(lián)的網(wǎng)站后臺(tái)簡(jiǎn)單便捷，真正實(shí)現(xiàn)了零基礎(chǔ)操作。

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

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

Vue中怎么封裝一個(gè)自己的組件

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

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

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

2.然后在index.vue中寫(xiě)自己的代碼。為了規(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下還有一個(gè)index.js文件，咱們要在index.js中注冊(cè)上自己定義的組件：

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

如圖所示：

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

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

this.buttons的定義如下：

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

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

感謝各位的閱讀！關(guān)于“vue element-ui之如何封裝一個(gè)自己的組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享名稱：vueelement-ui之如何封裝一個(gè)自己的組件-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article18/dgpsdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站建設(shè)、微信小程序、自適應(yīng)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)