微信小程序-组件插槽默认内容失效在uni-app无法显示

微信小程序-组件插槽默认内容失效在uni-app无法显示

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
4.85
v1.06.2210310
3.12.1

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

示例代码：

组件代码

<template>  
    <view>  
        <view>  
            <slot>  
                <view style="margin-bottom:20rpx;background-color:#000;color:#fff;height:100rpx">  
                    默认插槽内容  
                </view>  
            </slot>  
        </view>  
        <view>  
            <slot name="textView">  
                <view style="margin-bottom:20rpx;background-color:#fbf;height:100rpx">  
                    具名插槽内容  
                </view>  
            </slot>  
        </view>  

    </view>  
</template>  

<script setup>  
</script>  

<style>  
</style>

页面代码

<template>  
    <view>  
        <view style="margin-bottom:20rpx">  
            无任何插槽内容  
        </view>  
        <componentView>  

        </componentView>  
        <button style="margin-bottom:20rpx" @tap="showNameSlot = !showNameSlot">{{showNameSlot ?'隐藏': '显示'}}插槽</button>  
        <view style="margin-bottom:20rpx">  
            if判断template标签显示插槽  
        </view>  
        <componentView>  

            <!-- <template #default v-if="showNameSlot">  
                <view style="margin-bottom:20rpx" >  
                    新的默认插槽内容  
                </view>  
            </template> -->  
            <view style="margin-bottom:20rpx" >  
                新的默认插槽内容  
            </view>  
            <template #textView v-if="showNameSlot">  
                <view style="margin-bottom:20rpx">  
                    新的具名插槽内容  
                </view>  
            </template>  
        </componentView>  
        <view style="padding:20rpx 0">  
            if判断在view标签显示插槽  
        </view>  
        <componentView>  
            <view style="margin-bottom:20rpx" v-if="showNameSlot">  
                新的默认插槽内容  
            </view>  
            <template #textView >  
                <view v-if="showNameSlot">  
                    新的具名插槽内容  
                </view>  
            </template>  
        </componentView>  
    </view>  
</template>  

<script setup>  
    import componentView from './child/component.vue'  
    import {ref} from 'vue'  

    const showDefaultSlot = ref(false)  
    const showNameSlot = ref(false)  
</script>  

<style lang="scss">  

</style>

操作步骤：

分别测试
单纯使用组件-结果正常
通过v-if控制是否显示自定义插槽内容-插槽默认内容失效

预期结果：

应正常显示插槽默认内容

实际结果：

插槽默认内容全部失效

bug描述：

小程序组件插槽默认内容，当页面使用组件插槽的方式是通过v-if判断时，默认内容就失效了，而单纯使用组件，不使用插槽时，默认内容是有效的


更多关于微信小程序-组件插槽默认内容失效在uni-app无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该bug反馈内容完整，包含标题、详细描述、可运行代码示例、清晰复现步骤、合理预期与实际结果对比，以及分类信息（HBuilderX 4.85/Windows/微信小程序）。代码可直接运行，复现路径明确：单纯使用组件时默认插槽正常，但通过v-if控制插槽内容时默认内容失效。
经分析，该问题可能源于uni-app对小程序平台插槽实现的特殊处理。知识库明确说明插槽默认内容应在无内容提供时渲染，且编译作用域规则指出"父级模板内容在父级作用域编译"。用户代码中直接对默认插槽内容使用<view v-if="showNameSlot">的写法在标准Vue中应触发默认内容回退，但uni-app小程序平台可能存在条件渲染与插槽匹配的兼容性问题。
此非用户概念错误（写法符合Vue规范），但需注意：uni-app 4.85为较旧版本（当前最新正式版已更新），知识库未提及此为已知限制。建议用户先升级至最新HBuilderX版本验证，因历史版本存在小程序平台特殊实现差异。若问题仍存，需检查是否因v-if导致插槽节点判定异常，可尝试改用v-show或调整条件渲染位置作为临时方案。 内容为 AI 生成，仅供参考

更多关于微信小程序-组件插槽默认内容失效在uni-app无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


小程序不支持插槽内 显示默认信息 一直有这个问题 原生声小程序中也无法显示 参考文档：https://developers.weixin.qq.com/community/develop/doc/0008a04f2b0f289fa907b450b56000?highLine=<slot>不显示默认内容

这是一个已知的 uni-app 跨端编译问题。在微信小程序平台，当插槽内容使用 v-if 控制时，会导致默认插槽内容无法正常显示。

问题原因： uni-app 在编译到微信小程序时，对于条件渲染的插槽内容处理存在差异。微信小程序原生的 slot 机制在条件渲染场景下，无法正确回退到默认内容。

解决方案：

  1. 使用 v-show 替代 v-if（推荐）：
<componentView>
    <view style="margin-bottom:20rpx" v-show="showNameSlot">
        新的默认插槽内容
    </view>
    <template #textView>
        <view v-show="showNameSlot">
            新的具名插槽内容
        </view>
    </template>
</componentView>
  1. 在组件内部处理条件渲染： 将条件判断移到组件内部，通过 props 控制：
<!-- 组件内部 -->
<slot>
    <view v-if="!hasDefaultSlot">默认插槽内容</view>
</slot>

<!-- 页面使用 -->
<componentView :has-default-slot="showNameSlot">
    <view v-if="showNameSlot">新的默认插槽内容</view>
</componentView>
  1. 使用计算属性动态返回插槽内容：
const slotContent = computed(() => {
    return showNameSlot.value 
        ? { default: () => h('view', '新的默认插槽内容') }
        : null
})
回到顶部