最近在使用element-ui collapse組件的過程中，需要用collapse-item實現拖拽排序，原本組件滿足不了，先看下組件的原形。（本文使用的element-ui是用1.4.2版本）

第一版

拖拽結合開源組件 vuedraggable，詳細查看vuedraggable組件的用法。

<el-collapse><draggable v-model="arr"><el-collapse-item v-for="(item, index) in arr" :key="'key-' + index"><template slot="title"><span>{{'collapse-item-' + item}}</span></template></el-collapse-item></draggable> </el-collapse> 復制代碼

然后就報錯了，呼~ 報錯在于，collapse-item組件。

通過閱讀element-ui，collapse-item源碼路徑在 node_modules_element-ui@1.4.2@element-ui\packages\collapse\src\collapse-item.vue

computed: {isActive() {return this.$parent.activeNames.indexOf(this.name) > -1;} }, 復制代碼

可以看到計算屬性isActive通過父級activeNames來定義的，然而現在組件的層級結構是這樣。

collapse-item的父級是draggable， 肯定拿不到原本collapse的父級。

第二版

既然collapse-item拿不到想要的父級，想辦法讓其拿到collapse，組件重寫的思想，可以查看筆者的另外一問： 開發VUE使用第三庫，發現有bug怎么辦？，當然這里不是組件存在bug，而是擴展，思路是一樣的。

創建weCollapseIten.vue組件

<script> import {CollapseItem } from 'element-ui' export default {// 繼承了CollapseItemextends: CollapseItem,computed: {isActive () {// 這里重寫return this.$parent.$parent.activeNames.indexOf(this.name) > -1}} } </script> 復制代碼

通過this.parent，拿到父級的父級也就是collapse了。

<el-collapse><draggable v-model="arr">// 使用新組件<we-collapse-item v-for="(item, index) in arr" :key="'key-' + index"><template slot="title"><span>{{'collapse-item-' + item}}</span></template></we-collapse-item></draggable> </el-collapse> 復制代碼

大功靠成，功能已經實現。等等，這樣是否還不夠通用，而且在element-ui組件之間嵌套一個新的組件，對于閱讀者來說肯定是一臉懵逼。不夠通用而且沒有可以讀性。

第三版

創建weCollapse.vue組件

// 將element-ui collapse組件的模板重寫 <template><draggable class="el-collapse":list="list""><slot></slot></draggable> </template><script> import draggable from './vuedraggable'import {Collapse } from 'element-ui'export default {// 重寫collapse組件extends: Collapse,props: {list: Array},components: {draggable} } </script> 復制代碼

原本是這樣，使用draggable這件代替div，引用weCollapse組件就已經嵌入了draggable組件，帶有拖拽的功能，同時不影響原本element-ui collapse組件的功能。

<template><div class="el-collapse"><slot></slot></div> </template> 復制代碼

最終，代碼使用組件如下，跟element-ui原本組件的引用的一樣的，而功能上卻已經大不相同，這樣的好處就很多了，當然這組件編寫還不完美，wecollapse是否可以支持拖拽應該是封裝成一個屬性，不支持拖拽的就不需要用draggable來做包裹了，還有本身draggable支持的屬性也應該wecollapse來做支持。

<we-collapse :list="arr"><we-collapse-item v-for="(item, index) in arr" :key="'key-' + index"><template slot="title"><span>{{'collapse-item-' + item}}</span></template></we-collapse-item> </we-collapse> 復制代碼

總結

以上是生活随笔為你收集整理的使用继承思想，去开发一款组件（element-ui collapse组件为例子）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。