SOURCE

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
</div>
<style>
    *{padding:0;margin:0;box-sizing: border-box;}
    .item{ height: 80px;}
    .ellipsis{white-space: nowrap;text-overflow: ellipsis;overflow:hidden}
    .flex{display: flex;}
        .flex-middle{align-items: center;}
        .flex-item{flex: 1 1 auto;overflow:hidden;}
            .flex-item-fixed{flex: 0 0 auto;padding: 0 20px}
        .flex-item-avatar{min-width: 40px}
</style>
<script>
    Vue.component('vv-list-item',{
        props: ['info'],
        template: `
            <div class="item flex flex-middle">
                <div class="flex-item-fixed flex-item-avatar">
                    <slot name="avatar">
                        图
                    </slot>
                </div>
                <div class="flex-item">
                    <slot>
                        <div class="flex-item-txt ellipsis" v-for="item in info.txt">{{item}}</div>
                    </slot>
                </div>
                <div class="flex-item-fixed">
                    <slot name="btn">
                        <span style="display:inline-block;min-width: 3em;text-align:center;background:#0cc;border-radius: 100px;">打开</span>
                    </slot>
                </div>
            </div>
        `,
        mounted(){
            //console.log(this.$slots)
        }
    })
    new Vue({
        el: '#app',
        template: `
        <div>
            <h3>base</h3>
            <vv-list-item :info="({
                img: 'http://cdn.jsrun.top/css/img/logo@2x.png',
                txt: ['aaa','bbb']
            })"></vv-list-item>
            <vv-list-item :info="({
                img: 'http://cdn.jsrun.top/css/img/logo@2x.png',
                txt: ['aaa']
            })"></vv-list-item>
            <vv-list-item :info="({
                img: 'http://cdn.jsrun.top/css/img/logo@2x.png',
                txt: ['aaa','bbb','ccc']
            })"></vv-list-item>
            <vv-list-item :info="({
                img: 'http://cdn.jsrun.top/css/img/logo@2x.png',
                txt: ['aaa','bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb','ccc']
            })"></vv-list-item>
            <vv-list-item :info="({
                img: 'http://cdn.jsrun.top/css/img/logo@2x.png',
                txt: ['aaa','bbb','ccc']
            })">
                <div>default</div>
                <template #avatar>avatar</template>
                <template #content>1111</template>
                <template #btn>
                    <P>btn1</P>
                    <P>btn2</P>
                    <P>btn2</P>
                </template>
            </vv-list-item>
        </div>
        `,
        data(){
            return {

            }
        }
    })
</script>