带插槽且传不同字段的组件封装

组件：

<div class="iconList" v-if="[5, 6].indexOf(lineCount) !== -1">
    <div class="iconList layout-content">
            <div class="item" 
            :class="'item-size'+lineCount" 
            v-for="(item,index) in list" 
            :key="'icon'+index"
            @click="openDetails(item)"
            >
                <slot class="icon" name="icon" :info="item" ></slot>
                <div class="text">{{ item[typeName] }}</div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
     props: {
        list: {
            type:Array,
            default () {
                return [
                ]
            }
        },
        lineCount: {
            type: Number,
            default:6
        },
        typeName: {
            type: String,
            default:'name'
        }
    },
    methods: {
        openDetails (item) {
            this.$emit('openDetail',item)
        }
    }
}
</script>

使用：

 <div class="iconList1">
        <iconList :list="iconLists" :lineCount=6 typeName="name" @openDetail="openDetail">
            <template v-slot:icon='{info}'>
                <i :class=info.icon></i>
            </template>
        </iconList>
    </div>
/

<div class="iconList2">
        <iconList :list="infoLists" :lineCount=5 typeName="bofang" @openDetail="openDetail">
            <template v-slot:icon='{info}'>
                <div>{{ info.name }}</div>
            </template>
        </iconList>
    </div>
///
 methods: {
        contentClick (item) {
            window.open(item.src);
            console.log(item,'contentClick');
        },
        clickMore (item) {
            console.log('clickMore', item);
            window.open(item);
        },
        openDetail (item) {
            console.log(item,'openDetail');
        }        
    }