qimall/backend/modules/mall/views/overview/components/list.php

<template id="lo-list">
    <div class="list-contain" v-infinite-scroll="onReachBottom">
        <div class="list-content" v-for="(item,index) in list" flex :key="index">
            <span>{{item}}</span>
        </div>
        <slot v-if="isSlots" name="list" :item="123"></slot>
    </div>
</template>
<script>
    // 组件变量传不出去
    Vue.component('lo-list', {
        name: "lo-list",
        template: '#lo-list',
        props: {
            list: {
                type: Array,
                required: true,
                default () {
                    return []
                }
            }
        },
        methods: {
            onReachBottom() {
                this.$emit("onReachBottom")
            }
        },
        computed: {
            isSlots() {
                console.log(this.$slots);
                return this.$slots.list
            }
        }
    });
</script>
<style>
    .list-contain {
        height: 100%;
        overflow: scroll;
    }
</style>