在開發(fā)過程當中，列表頁面會有很多，比如：消息列表、用戶列表等。
我們可以為這樣的頁面封裝一個可復用性的列表組件。

這些頁面的共性：
1、后端接口非常相似：請求列表數(shù)據(jù) 需要提交的參數(shù) 請求的頁數(shù)pageIndex 和 每頁的個數(shù) pageSize ，返回參數(shù) data 里邊基本會有 list數(shù)組。
2、分頁加載，也就是上拉加載更多，或者點擊頁面加載更多。

不同之處：
1、每個列表項的UI布局不同。比如：消息列表，每個消息大概內(nèi)容包括：消息標題，描述，時間等信息。用戶列表，每個用戶項，大概內(nèi)容包括：用戶的姓名，聯(lián)系方式等等。
2、每個列表項有自己的業(yè)務邏輯，點擊事件等等
3、后端接口請求參數(shù)，pageIndex和pageSize之外的參數(shù)。

封裝可復用列表組件涉及到的vue 技術點
1、props 父組件 把 請求api地址和請求參數(shù)傳遞給組件。
2、v-slot 作用域插槽 父組件可以訪問子組件 item 數(shù)據(jù)，解耦UI布局。
3、mint-ui Loadmore 組件 實現(xiàn)上拉加載更多。

我們在封裝復用性組件的時候，組件名建議使用多個單詞，避免跟現(xiàn)有的以及未來的 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 數(shù)據(jù)，父級可以訪問 -->
                <slot v-bind="item"></slot>
            </div>
            <div class="store-no-more" v-if="noMoreShow">
              {{list.length==0?'暫無數(shù)據(jù)':'沒有更多了'}}
            </div>
        </mt-loadmore>
    </div>
</template>
<script>
    import utils from '@/utils' // 公共方法
    export default {
        name:'v-list', 
        data:()=>({
            pageIndex:1, // 請求頁
            list:[],//列表數(shù)據(jù)
            bottomAllLoaded:false,//上拉加載更多
            noMoreShow:false,//沒有更多了 提示
        }),
        props:{
            // 請求配置 兩個 key 1.url 請求api接口    2.data  請求參數(shù)
            requestData:{
                type:Object,
                default:()=>{},
            }
        },
        created(){
            this.getList();
        },
        components:{},
        methods:{
            //獲取列表
            getList(){
                // data 請求列表參數(shù) url  api 地址
                let {data,url} = this.requestData;
                // 請求列表數(shù)據(jù)  request 方法是 axios 請求封裝
                utils.request({ 
                    params:{
                        url, // api
                        params:{
                            ...data,  // 混入請求參數(shù)
                            pageIndex:this.pageIndex,
                            pageSize:10,
                        }
                    },
                    success:(data)=>{
                        //接口返回list數(shù)組 具體的業(yè)務邏輯請結合你自己的項目 自己處理。
                        //比如：是不是最后一頁，沒有數(shù)據(jù)等等。
                        if( data.list ){
                                // 合并數(shù)組
                                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布局自行處理，這里我們可以訪問數(shù)組項數(shù)據(jù)，
                訪問數(shù)據(jù)可以通過  item.key 訪問 ，
                比如：item.name名字  item.phone 手機號-->
            </div>
        </v-list>
    </div>
</template>
<script>
    import vList from '@/components/v-list/v-list'
    export default {
        data:()=>({
            // 我們傳入 props 的數(shù)據(jù) ，url  是 api 接口 ，
            // data  是我們請求列表數(shù)據(jù)的參數(shù)
            requestData:{ 
                url: 'api',
                data: {
                    // 請求列表參數(shù)
                }
            },
        }),
        components:{vList},
    }
</script>

好，到了這里我們就封裝并使用了一個可復用列表組件。
總結：
封裝這個列表組件，可以解決大部分列表頁，列表組件完成了，數(shù)據(jù)請求，加載更多，是不是最后一頁等功能，不必在每個列表頁，處理這些問題。
我們通過作用域插槽，父級可以訪問每個列表項的數(shù)據(jù)，可以解耦UI布局，自己定義自己的UI布局，添加事件等。