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

第一版

拖拽結(jié)合開源組件 vuedraggable，詳細(xì)查看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> 復(fù)制代碼

然后就報(bào)錯(cuò)了，呼~ 報(bào)錯(cuò)在于，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;} }, 復(fù)制代碼

可以看到計(jì)算屬性isActive通過父級(jí)activeNames來定義的，然而現(xiàn)在組件的層級(jí)結(jié)構(gòu)是這樣。

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

第二版

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

創(chuàng)建weCollapseIten.vue組件

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

通過this.parent，拿到父級(jí)的父級(jí)也就是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> 復(fù)制代碼

大功靠成，功能已經(jīng)實(shí)現(xiàn)。等等，這樣是否還不夠通用，而且在element-ui組件之間嵌套一個(gè)新的組件，對(duì)于閱讀者來說肯定是一臉懵逼。不夠通用而且沒有可以讀性。

第三版

創(chuàng)建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> 復(fù)制代碼

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

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

最終，代碼使用組件如下，跟element-ui原本組件的引用的一樣的，而功能上卻已經(jīng)大不相同，這樣的好處就很多了，當(dāng)然這組件編寫還不完美，wecollapse是否可以支持拖拽應(yīng)該是封裝成一個(gè)屬性，不支持拖拽的就不需要用draggable來做包裹了，還有本身draggable支持的屬性也應(yīng)該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> 復(fù)制代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。