imengyu
imengyu
  • 发布:2025-10-29 14:35
  • 更新:2025-10-29 15:48
  • 阅读:42

【报Bug】vue3 组件透传插槽在微信小程序上会导致插槽默认内容无法显示

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows10 19042.608

HBuilderX类型: 正式

HBuilderX版本号: 4.84

第三方开发者工具版本号: 2.01.2510241 win32-x64

基础库版本号: 3.9.3

项目创建方式: HBuilderX

操作步骤:
  1. 下载附件项目 test1.zip
  2. 运行至浏览器
  3. 运行至微信小程序

预期结果:

小程序应该与H5一致,第一个组件调用应该正常显示插槽默认内容。

实际结果:

第一个组件调用在小程序未正常显示插槽默认内容。

bug描述:

有两个组件 compnent1、compnent2,compnent2继承compnent1,compnent1 有一个具名插槽title,

<slot name="title">  
    <text style="color: red;">title插槽默认内容</text>  
</slot>

在最外层调用compnent2时需要可以传入自定义 title 插槽内容,因此将title插槽透传至2:

<component1>  
    <template v-if="$slots.title" #title>  
        <slot name="title" />  
    </template>  
</component1>

最外层调用:

<component2 />  
或者:  
<component2>  
    <template #title>  
        <text style="color: blue;">顶层传入插槽内容</text>  
    </template>  
</component2>

目前在H5中运行正常,但在小程序中即使最外层未传入插槽内容,component1的默认内容也无法显示,如图:

H5中运行正常:

小程序中未显示插槽默认内容:

2025-10-29 14:35 负责人:DCloud_UNI_JBB 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

v-if + v-slot 组合起来行为异常是已知问题,会尽快修复

要回复问题请先登录注册