3***@qq.com

发布：2022-10-10 15:07
更新：2022-10-18 15:08
阅读：1429

【报Bug】小程序端组件使用v-for遍历嵌套slot动态插槽时无法正常渲染

分类：uni-app

bug已修复

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

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 21H2

HBuilderX类型：正式

HBuilderX版本号： 3.6.4

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

基础库版本号： 2.26.1

项目创建方式： HBuilderX

示例代码：

// 子组件  
<swiper  
  class="swiper"  
  :current="tabsIndex"  
  style="height: calc(100vh - 88rpx)"  
  @change="handlePageChange"  
>  
  <swiper-item v-for="(item, index) in tabs" :key="item.slot">  
    <slot :name="tabs[index].slot"></slot>  
    <div style="height: 40rpx"></div>  
  </swiper-item>  
</swiper>

// 父组件  
<vx-tabs-page :tabs="tabsList" @change="tabsPageInit">  
  <template #customerInfo>  
    // 传入插槽的组件c  
    <customer-info ref="customerInfo" :model="detail">  
    </customer-info>  
  </template>  
</vx-tabs-page>  

const tabsList = [  
    {  
      name: "客户信息",  
      slot: "customerInfo",  
    }  
]

编译出来后的小程序结构

<swiper class="swiper data-v-27a7c864" current="{{d}}" style="height:calc(100vh - 88rpx)" bindchange="{{e}}">  
    <swiper-item wx:for="{{c}}" wx:for-item="item" wx:key="b" class="data-v-27a7c864">  
        // 这里的item.a打印出来是customerInfo-0  
        <slot name="{{item.a}}"></slot>   
        <view class="data-v-27a7c864" style="height:40rpx">  
        </view>  
    </swiper-item>  
</swiper>

编译后动态插槽打印出来的name值显示为customerInfo-0，给tabsList的slot字段后面加了'-index'

操作步骤：

如上述代码贴片即可复现

预期结果：

前几个版本这种写法是没有问题的

实际结果：

最近发现更新后无法实现效果了

bug描述：

组件内使用v-for遍历动态slot插槽，在微信小程序上无法正常编译，前几个版本可以。

2022-10-10 15:07 负责人:无分享

4 个回复

DCloud_UNI_WZF

vue3 复现该问题，感谢反馈，已加分

3***@qq.com (作者)

估计下个版本修复吗官方大大

2022-10-11 10:57
DCloud_UNI_WZF

回复 3***@qq.com: 修复后我会在该贴下回复

2022-10-11 12:13
DCloud_UNI_WZF

回复 3***@qq.com: 你的需求 tabList 中的 slot 是会相同还是不同，也就是多个不同的具名插槽还是多个相同的具名插槽？

2022-10-12 13:23
3***@qq.com (作者)

回复 DCloud_UNI_WZF: 不同的

2022-10-12 14:53

3***@qq.com (作者)

这是大概的业务逻辑

// 分页配置  
const tabsList = [  
    {  
      name: "客户信息",  
      slot: "customerInfo",  
    },  
    {  
      name: "历史订单",  
      slot: "historyOrder",  
    },  
    {  
      name: "客户日志",  
      slot: "customerLog",  
    },  
    {  
      name: "跟进日志",  
      slot: "followLog",  
    },  
];  

<vx-tabs-page :tabs="tabsList" @change="tabsPageInit">  
  <template #customerInfo>  
    <customer-info ref="customerInfo" :model="detail"></customer-info>  
  </template>  
  <template #historyOrder>  
    <history-order ref="historyOrder" :customer-id="param.id"></history-order>  
  </template>  
  <template #customerLog>  
    <customer-log ref="customerLog" :customer-id="param.id"></customer-log>  
  </template>  
  <template #followLog>  
    <follow-log ref="followLog" :customer-id="param.id"></follow-log>  
  </template>  
</vx-tabs-page>

Senran - 森然

组件这样定义然后使用插槽也无法显示

DCloud_UNI_WZF

测试vue项目及微信小程序原生是否支持，如支持，提供测试工程，谢谢

2022-10-14 10:13
3***@qq.com (作者)

循环同名具名插槽只会显示一个的吧

2022-10-14 11:08

DCloud_UNI_Anne

HBuilderX3.6.7-alpha已修复

该问题目前已经被锁定, 无法添加新回复

【报Bug】小程序端组件使用v-for遍历嵌套slot动态插槽时无法正常渲染

编译出来后的小程序结构

操作步骤：

如上述代码贴片即可复现

预期结果：

前几个版本这种写法是没有问题的

实际结果：

最近发现更新后无法实现效果了

bug描述：

4 个回复

这是大概的业务逻辑

公告

相关问题

【报Bug】小程序端组件使用v-for遍历嵌套slot动态插槽时无法正常渲染

编译出来后的小程序结构

操作步骤： 如上述代码贴片即可复现

预期结果： 前几个版本这种写法是没有问题的

实际结果： 最近发现更新后无法实现效果了

bug描述：

与内容相关的链接

4 个回复

这是大概的业务逻辑

公告

相关问题

操作步骤：

如上述代码贴片即可复现

预期结果：

前几个版本这种写法是没有问题的

实际结果：

最近发现更新后无法实现效果了