列表组件化

在项目有开发中,经常会遇到很多的列表,重复的分页、列表数据以及请求参数都是一样的,那么如何组件化呢?

这是我之前在项目中一种解决方案,分享出来大家探讨探讨。

我在项目中使用的vue提供的mixins

1.将请求、分页操作等操作封装到一个mixinPage.js文件中,该中操作方法和数据的方式和组件里时一模一样的(相当于创建一个不要template模板的组件)

列表组件化

请求列表的api也封装到该文件的methods中,可通过this.(api).调用

2.在列表页面引入mixinPage.js文件,使用mixins混入当前组件

列表组件化

3.传入请求等api或者参数,参数正常在组件中声明即可

列表组件化

同mixinPage.js调用api时只需调用this.pageApi即可,可更具不同的页面传入不同的api

4.封装列表组件list.vue,这一步就不需要我描述了,只需要将方法、数据绑定到list.vue组件即可。

大家还有其他的实现方式吗?欢迎在下方留言!!!