vue组件二次封装，组件继承

vue组件二次封装，组件继承

---

前言

使用第三方组件库时，无法直接修改组件，为了满足使用场景，我们可以二次封装组件。另一个使用场景是，多个组件合并为一个组件，例如：带有分页的表格、带有搜索的树组件。

以s-tree为例子，为了方便使用，我们需要自己的s-tree组件可以完全使用Tree的原有属性props、事件event、插槽slot；

做后台的小伙伴，可能会认为是s-tree继承了tree，但实际并不是继承……

---

一、属性props

v-bind=“$attrs”

<!-- 这里是STree -->
<div>
	<Tree v-bind="$attrs”></Tree>
</div>

二、事件event

v-on=“$listeners”

<!-- 这里是STree -->
<div>
	<Tree v-bind="$attrs" v-on="$listeners"></Tree>
</div>

三、插槽slot

<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" v-bind="slotProps"/>
</template>

<!-- 这里是STree -->
<div>
	<Tree v-bind="$attrs" v-on="$listeners">
		<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
		    <slot :name="slotName" v-bind="slotProps"/>
		</template>
	</Tree>
</div>

---

四、使用

此处以iview的Tree为例，我们的s-tree已经完全继承了Tree所有的东西

<s-tree :data="data" multiple show-checkbox @on-check-change="onChange" ></s-tree>

剩下的就是随意改造s-tree，你可以为它加个搜索功能；如果s-tree的props与Tree相同，则可以覆盖Tree的props

---

五、总结

以上只是常规组件二次封装的方法，实际使用时，应该根据情况灵活的处理，例如自定义插槽，无法继承，就需要我们自行定义并使用插槽。