vue如何扩展第三方组件（d2-crud-plus是如何实现对d2-crud-x包装增强）（一）

使用d2-crud-plus有段时间了，现在来探究下d2-crud-plus是通过怎样的方式实现对d2-crud-x增强辅助，希望自己能够学到思想并举一反三。

一、找源码

de-crud-plus：https://gitee.com/greper/d2-crud-plus/tree/master/packages/d2-crud-plus

二、d2-crud-x的使用方法

d2-crud-x是对Element表格组件的封装拓展。

现在看下安装后d2-crud-x的使用方式，引用如下图

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2CrudX from 'd2-crud-x'

Vue.use(ElementUI)
Vue.use(D2CrudX,{name:'d2-crud-x})

然后在HTML标签上配置文档的配置项，我用基础的columns+data 来示例

 

x的基本使用运行效果图：

现在来看下plus是怎么是怎么使用的：

这次很多props都不见了，直接用到一个v-bind绑定。以前没怎么关注VUE，文档没仔细看。这次我特意看了下v-bind的作用。它可以绑定要一个对象，应该是用到文档中的这句话

<!-- 绑定一个全是 attribute 的对象 -->

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

看了下源码

瞬间明白 plus写了一个mixins得计算属性，使用v-bind一条龙绑过去了。

三、学而思

使用了plus得设计明显 X少了一大堆的props attr代码，我以后也能用这种方式来解决props过多的问题^_^