vue 封装可复用列表组件

在开发过程当中，列表页面会有很多，比如：消息列表、用户列表等。
我们可以为这样的页面封装一个可复用性的列表组件。

这些页面的共性：
1、后端接口非常相似：请求列表数据 需要提交的参数 请求的页数pageIndex 和 每页的个数 pageSize ，返回参数 data 里边基本会有 list数组。
2、分页加载，也就是上拉加载更多，或者点击页面加载更多。

不同之处：
1、每个列表项的UI布局不同。比如：消息列表，每个消息大概内容包括：消息标题，描述，时间等信息。用户列表，每个用户项，大概内容包括：用户的姓名，联系方式等等。
2、每个列表项有自己的业务逻辑，点击事件等等
3、后端接口请求参数，pageIndex和pageSize之外的参数。

封装可复用列表组件涉及到的vue 技术点
1、props 父组件 把 请求api地址和请求参数传递给组件。
2、v-slot 作用域插槽 父组件可以访问子组件 item 数据，解耦UI布局。
3、mint-ui Loadmore 组件 实现上拉加载更多。

我们在封装复用性组件的时候，组件名建议使用多个单词，避免跟现有的以及未来的 HTML 元素相冲突。

v-list 组件

<!-- 列表组件 -->
<template>
    <div class="list">
        <mt-loadmore 
            :bottom-method="loadBottom"
            :bottom-all-loaded="bottomAllLoaded"
            :autoFill="false" 
            ref="loadmore">
            <div v-for="(item,index) in list" :key="index">
                <!-- 这里是关键 slot 插槽 绑定 item 数据，父级可以访问 -->
                <slot v-bind="item"></slot>
            </div>
            <div class="store-no-more" v-if="noMoreShow">
              {{list.length==0?'暂无数据':'没有更多了'}}
            </div>
        </mt-loadmore>
    </div>
</template>
<script>
    import utils from '@/utils' // 公共方法
    export default {
        name:'v-list', 
        data:()=>({
            pageIndex:1, // 请求页
            list:[],//列表数据
            bottomAllLoaded:false,//上拉加载更多
            noMoreShow:false,//没有更多了 提示
        }),
        props:{
            // 请求配置 两个 key 1.url 请求api接口    2.data  请求参数
            requestData:{
                type:Object,
                default:()=>{},
            }
        },
        created(){
            this.getList();
        },
        components:{},
        methods:{
            //获取列表
            getList(){
                // data 请求列表参数 url  api 地址
                let {data,url} = this.requestData;
                // 请求列表数据  request 方法是 axios 请求封装
                utils.request({ 
                    params:{
                        url, // api
                        params:{
                            ...data,  // 混入请求参数
                            pageIndex:this.pageIndex,
                            pageSize:10,
                        }
                    },
                    success:(data)=>{
                        //接口返回list数组 具体的业务逻辑请结合你自己的项目 自己处理。
                        //比如：是不是最后一页，没有数据等等。
                        if( data.list ){
                                // 合并数组
                                this.list = [...this.list,...data.list]; 
                            }
                        // mint ui Loadmore 的一个方法。如果没有用过可以忽略。
                        // 本章学习的要点是 props 和 v-slot
                        this.$refs.loadmore.onBottomLoaded(); 
                    }
                })
            },
            //上啦加载更多
            loadBottom(){
                this.bottomAllLoaded = true;
                this.pageIndex++;
                this.getList();
            },
        }
    }
</script>

使用 v-list

<!-- 父级 -->
<template>
    <div class="view">
                                          <!-- 作用域插槽 -->
        <v-list :request-data="requestData" v-slot="item"> // 
            <div class="item">
                <!--具体的UI布局自行处理，这里我们可以访问数组项数据，
                访问数据可以通过  item.key 访问 ，
                比如：item.name名字  item.phone 手机号-->
            </div>
        </v-list>
    </div>
</template>
<script>
    import vList from '@/components/v-list/v-list'
    export default {
        data:()=>({
            // 我们传入 props 的数据 ，url  是 api 接口 ，
            // data  是我们请求列表数据的参数
            requestData:{ 
                url: 'api',
                data: {
                    // 请求列表参数
                }
            },
        }),
        components:{vList},
    }
</script>

好，到了这里我们就封装并使用了一个可复用列表组件。
总结：
封装这个列表组件，可以解决大部分列表页，列表组件完成了，数据请求，加载更多，是不是最后一页等功能，不必在每个列表页，处理这些问题。
我们通过作用域插槽，父级可以访问每个列表项的数据，可以解耦UI布局，自己定义自己的UI布局，添加事件等。