複用的列表組件

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

這些頁面的共性：
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>