element ui 上一页下一页_【分享吧】以列表滑动翻页实例思考在Vue框架下组件的封装思想...

     Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

     相信对于前端的开发人员来说，关于Vue都会有大致的了解，或者对于组件封装也大致有部分自己的经验，在今天的文章中不会对于Vue的语法进行过多的阐述，而是站在组件封装的角度进行思考。

     说到组件，网络上有很多成型的开源组件库，而Element就是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，使用这个组件库中的元素来搭建界面将会节省很多时间。但是Element组件也有自身的限制，如果直接使用，则前端页面的代码量也比较繁冗，并不会根据业务页面的差异灵活配置，所以这就需要进一步考虑将子组件封装成父组件，从而让开发人员进行灵活的配置及调用。

一、封装组件需要具备的特性

1.使用简便性

     由于封装组件的目的是要用最简单的代码来构建前端的html，使开发人员的精力主要放在后台代码的逻辑实现与前台的交互上，所以封装组件的调用不易繁琐，越简单越好，最简方案就是使用一个html自定义标签来代表封装组件，比如，而所有的组件实现都在dfitc-table相应的组件文件里面实现。前端开发人员仅仅需要在页面中放置一个标签就可以将一个拥有繁重功能的列表或者批量输入的控件在前端进行引用，而无需为内部繁重的实现进行烦恼，增加了代码的可复用性和开发效率。

2.参数可控性

     前文说到，封装组件的目的是为了根据不同业务要求进行统一的组件样式管理，方便前端开发人员进行调用，所以组件的通用性同样伴随着业务差异性的冲击。所有页面都可以调用的通用组件如何做到根据不同业务进行不同的显示，这就涉及到组件的参数管理了。

     组件的参数传递一般都是为了满足业务页面的不同差异性，如数据显示 、样式控制、功能触发等。所有需要与组件进行交互的参数都需要从业务页面进行传递，而参数必须要有默认值，支持在不使用的情况下，组件会默认相应参数值。

     参数类型一般分为两类：数值和方法，而数值参数分为定量和变量。

     定量在组件标签中会通过如 type=”1” 的方式来进行配置，此配置在页面中不可更改，建议如宽度、高度、查询策略、翻页策略等这种不会在操作中动态变化的属性参数可以设置为定量。

     变量在组件标签中会通过如 :type=”value” 的方式来配置，而value的值在js代码中可进行动态定义及更改，当操作相关功能进行变量更改之后，组件会直接监听参数的变化进行页面的改变。

  方法在组件标签中会通过如 @fuc=”fucvalue” 的方式来配置 ，而fucvalue需要在业务页面的methods中进行方法定义，来承载从组件中触发返回的相应方法。

3.可扩展性

     组件是可扩展的，封装后的组件随时可能因为新的业务模式而进行功能增加及方法优化，而这些优化都是在组件内部进行，前端调用最多配置几个参数或加一个方法。无论怎样扩展，都不应该影响已有业务页面调用组件的功能。所以组件的扩展需要极为小心，需要具有全局的考虑。

二、列表滑动翻页组件的实现与思考

     接下来我们来实际进行一个组件封装的操作，其中会涉及到各种Vue的结构知识。

1.组件的建立

     首先在Vue的工程中找寻一个合适的位置建立文件夹放置你的自定义组件，在文件夹中可以新建立一个.vue文件作为封装组件的文件，所有的组件代码及控制都在.vue文件中实现，例dfitcTable.vue。

     之后在同目录下建立index.js文件来统一管理组件，文件内容可如下设置。

     最后在外侧的main.js总体引入文件中，将此index.js引入进工程，就可以在程序的任何地方使用 dfitc-table>进行组件调用了。引入内容可如下设置。

2.组件的开发

     组件的开发遵循Vue的一般语法规范，如程序中引入了element-ui可直接使用组件库作为子组件进行搭建，也可以自行编写html代码。

     Element组件库再此就不冗述了，网上有很详细的组件实例演示及方法调用。

     而关于