【报Bug】二次封装组件 v-for结合$slots透传插槽失败

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 4.24

第三方开发者工具版本号： 1.06.2310080

基础库版本号： 3.5.5

项目创建方式： HBuilderX

操作步骤：

页面

<template>  
    <view class="content" style="margin-top: 40px;">  
        <navbar>  
            <template #left>  
                <view>左侧插槽内容</view>  
            </template>  
            <template #right>  
                <view>右侧插槽内容</view>  
            </template>  
        </navbar>  
    </view>  
</template>  

<script setup>  
    import navbar from "@/components/navbar.vue"  
</script>

父组件

<template>  
    <view class="navbar">  
        <wxNavbar>  
               <template v-for="(value, name) in $slots" #[name]>  
                <slot :name="name"></slot>  
            </template>   
        </wxNavbar>  
    </view>  
</template>  

<script setup>  
    import wxNavbar from './wx-navbar.vue';  
</script>

子组件

<template>  
    <view class="wx-navbar">  
        <slot name="left">左侧默认内容</slot>  
        <slot name="right">右侧默认内容</slot>  
    </view>  
</template>

预期结果：

页面展示文本 "左侧插槽内容右侧插槽内容"
将navbar组件中的v-for内容替换为具名插槽写法即可看到预期结果

            <template #left>  
                <slot name="left"></slot>  
            </template>  
            <template #right>  
                <slot name="right"></slot>  
            </template>

实际结果：

页面展示文本 "左侧默认内容右侧侧默认内容"

bug描述：

在二次封装的组件中通过v-for和$slots实现插槽透传失败，将v-for替换为具名插槽时成功

2024-09-07 12:46 负责人:无分享

1 个回复

RiverBird001

我也遇到了，请问解决了吗

阿兴不会前端 (作者)

没有，插槽不多，我直接写死了

2024-10-17 16:07

要回复问题请先登录或注册

【报Bug】二次封装组件 v-for结合$slots透传插槽失败

预期结果：

页面展示文本 "左侧插槽内容右侧插槽内容"
将navbar组件中的v-for内容替换为具名插槽写法即可看到预期结果

`<template #left> <slot name="left"></slot> </template> <template #right> <slot name="right"></slot> </template>`

实际结果：

页面展示文本 "左侧默认内容右侧侧默认内容"

bug描述：

1 个回复

公告

相关问题

【报Bug】二次封装组件 v-for结合$slots透传插槽失败

预期结果： 页面展示文本 "左侧插槽内容 右侧插槽内容" 将navbar组件中的v-for内容替换为具名插槽写法即可看到预期结果 <template #left> <slot name="left"></slot> </template> <template #right> <slot name="right"></slot> </template>

实际结果： 页面展示文本 "左侧默认内容 右侧侧默认内容"

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

页面展示文本 "左侧插槽内容右侧插槽内容"
将navbar组件中的v-for内容替换为具名插槽写法即可看到预期结果

`<template #left> <slot name="left"></slot> </template> <template #right> <slot name="right"></slot> </template>`

实际结果：

页面展示文本 "左侧默认内容右侧侧默认内容"