uniapp 插槽slot

1. 默认插槽

<template>
    <view class="view ">
        <view v-if="title" class="solid-bottom title">
            <text class="cuIcon-titles text-green"></text>
            <text>{{title}}</text>
        </view> 
        <!-- 默认插槽 -->   
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name:"cart",
        props:{
            title:{
                type: String,
                default: ''
            },
        },
    }
</script>

<style scoped>
    .view{
        background-color: white;
        margin: 20upx; 
        padding: 20upx;
    }
    .view_margin_bottom{
        margin-bottom: 10upx;
    }
    .title{
        margin-bottom: 10upx;
        padding-bottom: 10upx;
    }
</style>

引入组件cart

<template>
    <view>
        <cart title="标题">
            <!-- 默认插槽 -->
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        <!-- <template v-slot:text>
                <ol>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ol>
            </template> -->
        </cart>
    </view>
</template>
<script>
    import cart from '@/components/cart/card.vue'  
    export default {
        components: {
            cart
        },
    }
</script>

2. 具名插槽(方便使用多个插槽)

在插槽加上name<slot name="xxx"></slot>,引用组件时使用某个插槽加上slot="xxx"或用<template>包裹v-slot:text,

例如：<view slot="xxx"></view> 或 <template v-slot:text><template/>

<template>
    <view class="view ">
        <view v-if="title" class="solid-bottom title">
            <text class="cuIcon-titles text-green"></text>
            <text>{{title}}</text>
        </view> 
       <!-- 具名插槽 -->
        <view style="color: red;">
            <slot name="text" ></slot>
        </view>
    </view>
</template>

引用组件

<template>
    <view >
       <cart title="标题">
            <!-- 默认插槽 -->
            <ol slot="text">
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ol>
       <!-- <template v-slot:text>
                <ol>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ol>
            </template> -->
        </cart>
    </view>
</template>