z***@qq.com
z***@qq.com
  • 发布:2025-08-27 15:53
  • 更新:2025-08-27 19:05
  • 阅读:31

【报Bug】微信小程序插槽透传,会导致子节点无法渲染插槽的默认值。

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 24H2

HBuilderX类型: Alpha

HBuilderX版本号: 4.76

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

基础库版本号: 3.9.2

项目创建方式: HBuilderX

示例代码:

A文件

<script setup>  
  import Parent from './Parent.vue'  
</script>  

<template>  
  <view class="box">  
    <view>使用插槽默认值</view>  
    <Parent />  
  </view>  
  <view class="box">  
    <view>使用插槽</view>  
    <Parent>  
      <template #child>  
        <view>我是外部插槽</view>  
      </template>  
    </Parent>  
  </view>  
</template>  

<style>  
  .box{  
    margin: 20px 10px;  
  }  
</style>

b文件

<template>  
  <view class="">  
    <view>这是Parent组件</view>  
    <Child>  
      <template v-if="hasSlot" #child>  
        <slot name="child"></slot>  
      </template>  
    </Child>  
  </view>  
</template>  

<script setup>  
  import {  
    computed,  
    useSlots  
  } from 'vue';  
  import Child from './Child.vue'  
  const slotMap = useSlots()  
  console.log('parent slotMap ->', slotMap)  

  const hasSlot = computed(() => !!slotMap.child)  
</script>  

<style>  
</style>

c文件

<template>  
  <view>  
    <view class="">  
      这是Child组件  
    </view>  
    <slot v-if="hasSlot" name="child" />  
    <view v-else>我是插槽默认值</view>  
  </view>  
</template>  

<script setup>  
  import {  
    computed,  
    useSlots  
  } from 'vue';  
  import Child from './Child.vue'  
  const slotMap = useSlots()  
  console.log('slotMap ->', slotMap)  
  const hasSlot = computed(() => !!slotMap.child)  
</script>  

<style>  
</style>

操作步骤:

每次都会复现,按照上述代码。

预期结果:

没有传递插槽的情况下,展示插槽默认值。

实际结果:

没有传递插槽的情况下,插槽默认值没有展示。
image.png

bug描述:

透传插槽的展示效果,小程序展示与h5结果不一致。
h5:
页面没有传递插槽的情况下,正常渲染插槽的默认值。传递了插槽的情况下,渲染插槽。

微信小程序:
页面没有传递插槽的情况下,未渲染插槽默认值,渲染了空插槽节点。传递了插槽的情况下,渲染插槽。

简单排查了,中间层透传插槽时,似乎没有通过hasSlot来判断插槽是存在,直接默认插槽存在。

  const slotMap = useSlots()    
  const hasSlot = computed(() => !!slotMap.child)  

<template v-if="hasSlot" #child>  
    <slot name="child"></slot>  
 </template>
2025-08-27 15:53 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

vue版本是多少?其他小程序有没有这问题?

要回复问题请先登录注册