快捷導(dǎo)航

vue element-ui之怎么封裝一個(gè)自己的組件的詳解

更新時(shí)間：2019年05月20日 14:23:25 作者：翼浪飛星

這篇文章主要介紹了vue element-ui之怎么封裝一個(gè)自己的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

為什么要進(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 element-ui之怎么封裝一個(gè)自己的組件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: