uni-app vue3 微信小程序 插槽默认内容编译不生效

uni-app vue3 微信小程序 插槽默认内容编译不生效

操作步骤：

  • 参考bug描述

预期结果：

  • 显示插槽默认内容

实际结果：

  • 未显示

bug描述：

// index.vue  
<template>  
  <view>   
    <Test>  
      <template #header>  
      </template>  
    </Test>  
  </view>  
</template>  

<script setup>  
import Test from "./Test.vue";  
</script>

// Test.vue  
<template>  
    <view>  
        <slot name="header">默认插槽</slot>  
    </view>  
</template>

编译到微信小程序，不生效，编译到h5就有效果。


更多关于uni-app vue3 微信小程序 插槽默认内容编译不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

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

更多关于uni-app vue3 微信小程序 插槽默认内容编译不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢，期待修复。

hbuilderx 4.76.2025073103-alpha 版本已修复此问题，可升级到此版本。

这是一个已知的微信小程序平台差异问题。在微信小程序环境中，当使用具名插槽且传入空内容时，默认插槽内容不会显示。

解决方案：

  1. 条件渲染方案（推荐）：
// Test.vue
<template>
    <view>
        <slot name="header">
            <text v-if="!$slots.header">默认插槽</text>
        </slot>
    </view>
</template>
  1. 使用作用域插槽检测：
// Test.vue
<template>
    <view>
        <slot name="header" :hasContent="false">
            <text>默认插槽</text>
        </slot>
    </view>
</template>
  1. 在父组件中避免空插槽：
// index.vue
<template>
  <view>   
    <Test>  
      <template #header>
        <!-- 至少保留一个空文本节点 -->
        {{ '' }}
      </template>  
    </Test>  
  </view>  
</template>
回到顶部