VUE+Element 前端應用，比較不錯的一點就是界面組件化，我們可以根據重用的指導方針，把界面內容拆分為各個不同的組合，每一個模塊可以是一個組件，也可以是多個組件的綜合體，而且這一個程序非常方便，組件封裝的目的就是為了能夠更加便捷、快速的進行業務功能的開發，組件（component）是vue的最強大功能之一，組件可以實作一些類似功能的復用及與其它業務邏輯的解耦，本篇隨筆介紹前端框架中常用到的一些組件封裝處理，用于簡化界面、隱藏實作細節的目的，
1、組件封裝的需要
在我們開發一個主要界面的時候，一般需要排列很多內容，各個部分的內容可能會在其他界面上比較常見，那么這些如果是簡單的使用原始的Element界面組件，以及簡單的復制處理的話，頁面代碼比較臃腫，而且隨著不斷的復制過去使用，各部分的界面又不在統一了，這個時候如果把那些相同的功能，抽象出來抽離成組件，通過組件參考方式就會顯得格外省事了，
在Winform開發中，我們知道有很多常見的用戶自定義控制元件，就是對常規界面內容的一些通用部分進行封裝，拖動過來即可使用，現在VUE+Element 前端應用的組件開發也很容易，把界面代碼和Vue的控制邏輯JS代碼組合一起形成一個小組件，通過使用Prop的方式傳入所需引數，由組件內部控制界面的展示邏輯及事件處理，那么界面呼叫組件的時候就非常簡潔，這樣我們主頁面上的代碼量就降低不少，也方便代碼的維護，
例如對于常規的字典下拉串列，我們希望系結一個字典型別就可以實作系統的下拉串列的顯示，那么我們可以封裝這個常見的界面內容為一個字典組件，
還有對于樹串列及其過濾實作等常規的處理，我們也可以通過簡單的封裝，實作樹串列的展示，這樣我們傳入對應的樹串列資料即可呈現所需要的樹狀串列內容，
另外，還有一種情況，是界面內容太多，我們把它按內容劃分為不同的界面組件，然后頁面進行獨立的維護，主界面直接一行代碼即可集成所需的內容板塊，極大減少主界面的代碼鋪陳，
例如：對于權限系統中的每個角色，除了包含基本資訊外，還會包含擁有的權限（功能控制點）、包含用戶，以及擁有的選單，其中權限是用來控制界面元素，如操作按鈕的顯示的，而擁有的選單，則是用戶以指定賬號登錄系統后，獲得對應角色的選單，然后構建對應的訪問入口的，角色界面模塊UML類圖如下所示，
那么對應界面元素上，我們就應該以不同的Tab來展示這些資訊，每個Tab內容部分就可以作為一個獨立的界面組件來開發，
在比如，組織機構里面添加成員和添加角色的操作UML圖，
其中添加成員、添加角色，涉及界面的串列資料展示以及對應的添加展示操作，獨立一個界面組件還是比較方便的，而且添加成員 ，在角色維護模塊里面也需要用到，那么可以兼容兩個場景來設計組件模塊，
2、界面組件的封裝處理
在VUE+Element 的前端場景中，想要封裝好一個組件，一般要熟練掌握的三個技能：1、父組件傳值到子組件（props） 2、子組件傳值到父組件（$emit）3、插槽使用（slot），對于一個獨立的組件，props是用來為組件內部注入核心內容；$emit用來使這個組件通過一些操作來融入其它組件中，
我們來詳細分析下前面介紹的組件場景，
對于字典模塊來說，一般如果需要實作和系統字典模塊里面的Api對接，并展示對應字典型別的下拉串列，實作代碼如下所示，
<el-select v-model="searchForm.ProductType" filterable clearable placeholder="請選擇"> <el-option v-for="(item, key) in typeList" :key="key" :label="item.value" :value="item.key" /> </el-select>
然后在JS邏輯里面使用字典的API獲取對應資料，然后系結到typeList屬性上面即可，這樣的邏輯如果每個用到字典的地方都需要這樣處理，代碼顯然比較臃腫，而且使用組件封裝更方便，
我們在Componen目錄下創建一個Common目錄，然后在其中添加一個my-dictdata.vue檔案，用來封裝字典內容處理的，
如果我們完成組件的撰寫，那么參考組件只需要一行代碼即可實作相同的功能了，
<my-dictdata v-model="searchForm.ProductType" type-name="商品型別" />
以及在頁面的組件里面引入這個自定義組件即可，
import myDictdata from '@/components/Common/my-dictdata' export default { components: { myDictdata },
如果為了簡便，也可以在main.js里面統一全域引入，
這樣相對于使用原始的Element界面組件，既有界面代碼，又有JS代碼，這樣的一行代碼就實作功能，顯得非常簡潔，
為了了解其中的奧秘，我們對組件的開發程序進行簡單的了解，其中組件界面部分的代碼如下所示，和上面的差不多，
<template> <el-select v-model="svalue" filterable clearable placeholder="請選擇"> <el-option v-for="(item, index) in dictItems" :key="index" :label="item.Text" :value="item.Value" > <span style="float: left;color:yello;"> <i class="el-icon-tickets" style="color:blue;" /> {{ item.Text }} </span> </el-option> </el-select> </template>
然后在JS部分引入字典操作的Api類，以及定義Prop屬性typeName，如下所示，
并對傳入Model值進行監控
我們在Mounted的實作里面，增加對字典資料的請求系結，如下所示，
對于樹形串列
一般來說它的使用代碼如下所示，
還是可以感覺比較臃腫，如果放到主頁面里面，會占用很多代碼行，維護起來也不方便，而且樹串列也是一個常見的界面展示內容，可以通過簡單的封裝進行減少主頁面的代碼量，
同樣我們可以通過封裝一個樹串列組件
我們可以在my-tree.vue里面定義很多常見的的Prop屬性，以方便呼叫的時候傳入對應的值來改變界面的呈現，
這樣主界面呼叫組件來實作功能的時候，只需要一行界面代碼即可，
<myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />
相應的處理獲得treedata的操作，是下面的函式
getTree() { // 樹串列資料獲取
var param = {
SkipCount: 0,
MaxResultCount: 1000,
Tag: 'web' // Web端專用
}
menu.GetAll(param).then(data => {
this.treedata = https://www.cnblogs.com/wuhuacong/p/[];// 樹串列清空
var list = data.result.items
if (list) {
// 使用getJsonTree函式，實作對二維表轉換為嵌套樹物件集合
var newTreedata =https://www.cnblogs.com/wuhuacong/p/ getJsonTree(list, {
id: 'id',
pid: 'pid',
children: 'children',
label: 'name'
});
this.treedata =https://www.cnblogs.com/wuhuacong/p/ newTreedata
}
});
},
而對于部分頁面組件的方式，這種一般不是很通用的組件，一般我們可以把它放在同一個目錄上的Components目錄里面，如下是權限模塊里面用到的一些界面內容組件封裝，
完成添加成員、添加角色的界面組件后，我們就可以在組織機構界面里面引入使用，
角色管理，我們也依據這個來對模塊的內容進行劃分，不同業務設計不同的界面組件，最后整合一起使用即可，
<el-dialog title="查看資訊" :visible="isView" :modal-append-to-body="false" @close="closeDialog"> <el-col> <el-tabs value="basicPage" type="border-card"> <el-tab-pane name="basicPage" label="基本資訊"> <el-form ref="viewForm" :model="viewForm" label-width="120px"> <el-form-item label="角色名"> <el-input v-model="viewForm.name" disabled /> </el-form-item> <el-form-item label="角色顯示名"> <el-input v-model="viewForm.displayName" disabled /> </el-form-item> <el-form-item label="角色描述"> <el-input v-model="viewForm.description" type="textarea" disabled /> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane name="permitPage" label="權限"> <rolefunction ref="rolefunction" :role-id="selectRoleId" /> </el-tab-pane> <el-tab-pane name="userPage" label="用戶"> <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" /> </el-tab-pane> <el-tab-pane name="menuPage" label="選單"> <rolemenu ref="rolemenu" :role-id="selectRoleId" /> </el-tab-pane> </el-tabs> </el-col> <div slot="footer" class="dialog-footer"> <el-button type="success" @click="closeDialog">關閉</el-button> </div> </el-dialog>
或者
以上就是我們封裝一些常見通用組件，以及頁面模塊的組件，主要的目的就是可以簡化主呼叫界面的代碼，以及提高使用的效率，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式
循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用
循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理
循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 選單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）--- 后端查詢介面和Vue前端的整合
循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5979.html
標籤：JavaScript
上一篇：關于ES6尾呼叫優化
下一篇：夯實 JS 基礎（慢慢更新）