uni-app 默认插槽内容在h5和app下显示，微信小程序下不显示
uni-app 默认插槽内容在h5和app下显示，微信小程序下不显示
示例代码：
<!-- 子组件 -->
<template>
<view>
<view>组件内部控件</view>
<slot name="body">
<view><text>默认插槽内容</text></view>
</slot>
</view>
</template>
<script setup></script>
<style lang="scss" scoped></style> <!-- 父组件 -->
<template>
<view>
<unit-component>
<template #body>
<view v-if="show">传入内容</view>
</template>
</unit-component>
</view>
</template>
<script setup>
import { ref } from 'vue';
import unitComponent from './components/unit-component';
const show = ref(false);
</script>
<style lang="scss" scoped></style> 操作步骤：
1
预期结果：
1
实际结果：
1
bug描述：
默认插槽内容，在h5和app下显示，微信小程序不显示
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境 | Mac |
| 操作系统版本 | macOS 14.0 (23A344) |
| 开发者工具 | vscode 1.84.2 (Universal) |
| 基础库版本号 | 3.0.0-3090820231124001 |
| 项目创建方式 | CLI |
| CLI版本号 | @vue/cli 5.0.8 |
3 回复
这问题应该是微信小程序端的问题 可以去微信社区问问
微信小程序识别的应该是template而不是里面的有无内容 所以你隐藏 template 中的view 并不会显示插槽内的默认内容
你试试可以把template用block包裹起来 在block上做v-if 把整个插槽隐藏
<template>
<view>
<unit-component>
<block v-if="show">
<template #body>
<view>传入内容</view>
</template>
</block>
</unit-component>
</view>
</template>
在 uni-app 中，默认插槽（default slot）内容在 H5 和 App 下显示正常，但在微信小程序下不显示，可能是由于微信小程序的渲染机制与 H5 和 App 有所不同。以下是一些可能的原因和解决方法：
1. 检查组件结构
确保父组件和子组件的结构正确，并且插槽内容被正确传递。例如：
<!-- 父组件 -->
<template>
<child-component>
默认插槽内容
</child-component>
</template>
<!-- 子组件 -->
<template>
<div>
<slot></slot>
</div>
</template>2. 使用具名插槽
如果默认插槽在微信小程序下不显示，可以尝试使用具名插槽来替代默认插槽。例如：
<!-- 父组件 -->
<template>
<child-component>
<template v-slot:default>
默认插槽内容
</template>
</child-component>
</template>
<!-- 子组件 -->
<template>
<div>
<slot name="default"></slot>
</div>
</template>3. 检查样式问题
微信小程序的样式渲染可能与 H5 和 App 有所不同，检查是否有样式问题导致内容不显示。可以尝试在微信小程序下调试样式。
4. 使用条件编译
如果问题仅在微信小程序下出现，可以使用 uni-app 的条件编译功能，针对不同平台进行不同的处理。例如：
<template>
<child-component>
<!-- #ifdef MP-WEIXIN -->
微信小程序下显示的内容
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
默认插槽内容
<!-- #endif -->
</child-component>
</template>