uni-app 微信小程序 动态插槽 问题
uni-app 微信小程序 动态插槽 问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 22H2 | HBuilderX |
### 示例代码：
```html
<up-form
ref="formRef"
:model="form"
:rules="rules"
borderBottom
labelPosition="left"
labelWidth="156rpx"
>
<template v-for="(item, index) in items" :key="index">
<up-form-item
:label="item.label"
:prop="item.prop"
:required="item.required"
>
<!-- 判断有没有对应的插槽内容 -->
<template v-if="$slots[item.prop]">
<view>动态插槽--------{{item.prop}}</view>
<slot :item="item" :model="form" :name="item.prop" />
</template>
</up-form-item>
</template>
</up-form>
这个是form的插槽部分
### 操作步骤：
```html
<CustomForm
:form="form"
:items="ITEMS"
:mode="mode"
:rules="rules"
title="质检单"
>
<template #imei="{ item, model }">
{{ item }}
123
</template>
</CustomForm>
组件实例
### 预期结果：
组件实例 中 动态插槽 正常渲染 内容
实际结果：
动态插槽 无法正常展示内容 但是正常渲染 动态插槽------可以正常显示prop，但是内容没显示 下面的具名插槽可以实现插槽效果
<template #imei>test_slot</template>
更多关于uni-app 微信小程序 动态插槽 问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
比如我使用这个组件，但是我想实现其他的功能，或者ui，使用动态插槽<template #imei="{ item, model }"> {{ item }} </template> 的情况下 好像支持不是很好
在 uni-app 中，动态插槽的渲染机制与 Vue 2 的运行时环境有关。从代码分析，问题出现在动态插槽名称的解析上。
当使用 $slots[item.prop] 判断插槽存在时，虽然能检测到插槽已被声明，但 <slot :name="item.prop" /> 在循环中可能无法正确匹配具名插槽。这是因为 Vue 2 对动态插槽名的支持有限，尤其在 uni-app 编译到小程序平台时，插槽的静态解析更为严格。
你的代码中，通过 <template #imei="{ item, model }"> 传递了作用域插槽参数，但动态插槽并未正确接收这些参数。而直接使用 <template #imei>test_slot</template> 能正常显示，是因为具名插槽在编译时就被静态解析，无需运行时动态匹配。
解决方案：
- 改用作用域插槽的静态声明方式，避免动态插槽名：
<up-form-item v-for="(item, index) in items" :key="index">
<slot :name="item.prop" :item="item" :model="form">
<!-- 默认内容 -->
</slot>
</up-form-item>
- 在父组件中明确声明每个可能的插槽：
<CustomForm>
<template v-for="item in ITEMS" #[item.prop]="{ model }">
<!-- 插槽内容 -->
</template>
</CustomForm>