7***@qq.com
7***@qq.com
  • 发布:2024-05-02 18:40
  • 更新:2024-05-09 16:47
  • 阅读:55

【报Bug】急!!!急!!!急!!!对使用v-for循环嵌套slot的组件进行二次封装,微信开发者工具报同名称的slot重复的bug

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 10

HBuilderX类型: 正式

HBuilderX版本号: 4.14

第三方开发者工具版本号: RC 1.06.2402021

基础库版本号: 3.4.1

项目创建方式: HBuilderX

示例代码:

使用v-for循环的slot相关组件hui-list.vue

<template>  
    <template v-if="props.options.length">  
        <hui-list-row :round="props.round">  
            <hui-list-cell v-for="(item, index) in props.options"  
                           :key="item.title"  
                           :borderColor="props.borderColor"  
                           :borderLeft="props.borderLeft"  
                           :borderRight="props.borderRight"  
                           :iconPrefix="props.iconPrefix"  
                           :leftIconColor="item.leftIcon?.color || props.leftIcon.color"  
                           :leftIconName="item.leftIcon?.name || props.leftIcon.name"  
                           :leftIconSize="item.leftIcon?.size || props.leftIcon.size"  
                           :rightIconColor="item.rightIcon?.color || props.rightIcon.color"  
                           :rightIconName="item.rightIcon?.name || props.rightIcon.name"  
                           :rightIconSize="item.rightIcon?.size || props.rightIcon.size"  
                           :showBorder="props.showBorder && props.options.length - 1 != index "  
                           @click="()=>onClick(item)">  
                <template v-slot:title>  
                    <slot name="title" :props="item"></slot>  
                </template>  
                <template v-slot:explain>  
                    <slot name="explain" :props="item"></slot>  
                </template>  
            </hui-list-cell>  
        </hui-list-row>  
    </template>  
</template>

二次封装后的组件hui-dropdown-list.vue

<template>  
    <view class="hui-dropdown-list" :style="listStyle">  
        <view class="hui-dropdown-list-header">  
            <view>  
                <slot name="title"></slot>  
            </view>  
            <hui-icon :color="props.headerIcon.color" :name="props.headerIcon.name" :prefix="props.iconPrefix"  
                      :size="props.headerIcon.size"></hui-icon>  
        </view>  
        <view class="hui-dropdown-list-body">  
            <hui-list :borderColor="props.borderColor"  
                      :borderLeft="props.borderLeft"  
                      :borderRight="props.borderRight"  
                      :iconPrefix="props.iconPrefix"  
                      :leftIconColor="props.leftIcon.color"  
                      :leftIconName="props.leftIcon.name"  
                      :leftIconSize="props.leftIcon.size"  
                      :options="props.options"  
                      :rightIconColor="props.rightIcon.color"  
                      :rightIconName="props.rightIcon.name"  
                      :rightIconSize="props.rightIcon.size"  
                      :round="props.listRound"  
                      :showBorder="props.showBorder"  
                      @click="onItemClick">  
                <template v-slot:title="{ props }">  
                    <slot name="cellTitle" :props="props"></slot>  
                </template>  
                <template v-slot:explain="{ props }">  
                    <slot name="cellExplain" :props="props"></slot>  
                </template>  
            </hui-list>  
        </view>  
    </view>  
</template>

操作步骤:

创建一个组件使用v-for循环嵌套slot,再创建一个组件对该组件进行二次封装,封装时使用同样的slot暴露出v-for循环嵌套的slot

预期结果:

预期结果不提示该错误,数据可以正常显示。未测试其他小程序是否有该问题,希望h5、app、各小程序都可正常使用

实际结果:

实际结果不提示该错误,数据可以正常显示。未测试其他小程序是否有该问题,希望h5、app、各小程序都可正常使用

bug描述:

v-for循环slot微信开发者工具报:[Component] More than one slot named "cellTitle" are found inside a single component instance (in component "hornetUI/components/hui-dropdown-list"). The first one was accepted,该组件是经由一个v-for组件二次封装造成的bug,编译出的slot明显不对,可看附件;

2024-05-02 18:40 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

  • 7***@qq.com (作者)

    什么时候可以支持,不止微信小程序,其他小程序也有类似的问题

    2024-05-13 16:08

要回复问题请先登录注册