uni-app 微信小程序在插槽内使用组件，所用的组件再嵌套插槽，在打包时报错

uni-app 微信小程序在插槽内使用组件，所用的组件再嵌套插槽，在打包时报错

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 20H2
第三方开发者工具版本号 1.05.2105170
基础库版本号 2.18.0
项目创建方式 CLI
CLI版本号 2.0.0-31920210609001

示例代码：

<template>  
  <test>  
    <template v-slot:default>  
      <inner>  
        <template v-if="useInner" v-slot:inner>  
        </template>  
      </inner>  
    </template>  
  </test>  
</template>  

<!-- test -->  
<template>  
  <div>  
    <slot />  
  </div>  
</template>  

<!-- inner -->  
<template>  
  <div>  
    <slot name="inner" />  
  </div>  
</template>

操作步骤：

已贴示例代码

预期结果：

与h5一致，可以编译成功

实际结果：

h5可以编译成功，微信小程序编译失败

bug描述：

嵌套两层插槽时打包错误（微信小程序）


更多关于uni-app 微信小程序在插槽内使用组件，所用的组件再嵌套插槽，在打包时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

把 uni 相关依赖都更新到 2.0.0-31920210709003 试试

更多关于uni-app 微信小程序在插槽内使用组件，所用的组件再嵌套插槽，在打包时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


把依赖更新之后可以了，谢谢

这是一个已知的微信小程序平台限制问题。在微信小程序环境中，当组件插槽内嵌套另一个带插槽的组件时，编译会失败，而H5平台则正常。

问题核心在于微信小程序的模板编译机制与Vue.js存在差异。微信小程序不支持在插槽内容中直接使用带有具名插槽的嵌套组件结构。

解决方案：

  1. 条件插槽内容外移 将条件判断移到外层，避免在插槽内部使用v-if：
<template v-slot:default>
  <inner v-if="useInner">
    <template v-slot:inner>
      <!-- 内容 -->
    </template>
  </inner>
</template>
  1. 使用动态组件 通过<component>动态渲染内部组件：
<template v-slot:default>
  <component :is="useInner ? 'inner' : 'div'">
    <template v-slot:inner v-if="useInner">
      <!-- 内容 -->
    </template>
  </component>
</template>
回到顶部