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

原创已于 2025-08-31 17:32:15 修改 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2025-08-31 17:30:14 首次发布

前端笔记【Vue】专栏收录该内容

23 篇文章

订阅专栏

案例：

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>