vue 版本3具名插槽实现组件定制化

​

 案例：

partOne.vue

<template>

<view>

    <carver-index>

       // v-slot:header 简写方式:  #header

       <template #header>
            carver1头部
       </template>

       <template #main>
            carver1身体
       </template>

       <template #footer>
            carver1底部
       </template>

    </carver-index>

</view>
    
</template>

partTwo.vue

<template>

<view>

    <carver-index>

        // v-slot:header 简写方式:  #header

        <template v-slot:header>
            carver2头部
        </template>

        <template v-slot:main>
            carver2身体
        </template>

        <template #footer>
            carver2底部
        </template>

    </carver-index>

</view>
    
</template>

组件：carver-index.vue

<template>

<view>

    <view class="header">
       <slot name="header"></slot>//具名插槽
    </view>

    <view class="main">
       <slot name="main"></slot>//具名插槽
    </view>

    <view class="footer">
       <slot name="footer"></slot>//具名插槽
    </view>

</view>
    
</template>