uni-app 使用动态slot进行使用时微信小程序编译后的slot name="xxx-0" 会自动添加上"-0"索引导致匹配不上渲染失败
uni-app 使用动态slot进行使用时微信小程序编译后的slot name=“xxx-0” 会自动添加上"-0"索引导致匹配不上渲染失败
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 15.3.2 | CLI |
示例代码：
<MyCustom :config="[{ name: 'input' }]">
<template v-slot:input="slotsProps">2212</template>
</MyCustom>
<view>
<template v-for="item in config">
<slot :name="item.name" xxx="测试文字"></slot>
</template>
</view>
操作步骤：
按照代码应该可以复现
预期结果：
正常渲染
实际结果：
不渲染 - 外层的slot名称似乎被更改了。并没有按照实际的
bug描述：
当正常使用自定义组件的slot插槽时 v-slot:xxx=“slotsProps” ,slot绑定就会失败，子组件无法正常渲染。去除="slotsProps"后正常渲染。查看dom节点发现添加了="slotsProps"时，他会自动为<view slot="xxx-0"/>添加 -index索引 导致匹配不上slot
更多关于uni-app 使用动态slot进行使用时微信小程序编译后的slot name="xxx-0" 会自动添加上"-0"索引导致匹配不上渲染失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
发个可复现demo
更多关于uni-app 使用动态slot进行使用时微信小程序编译后的slot name="xxx-0" 会自动添加上"-0"索引导致匹配不上渲染失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是微信小程序平台在编译动态slot时的特定处理机制。当slot作用域包含参数传递时，微信小程序编译器会自动为slot名称添加索引后缀以确保作用域数据的正确隔离。
问题分析：
- 在
v-slot:input="slotsProps"声明时，编译器会生成slot="input-0"的节点 - 但子组件中动态slot名称仍为
item.name（即"input"） - 名称不匹配导致渲染失败
解决方案：
方案一：统一使用作用域slot（推荐）
<!-- 父组件 -->
<MyCustom :config="[{ name: 'input' }]">
<template v-slot:input="slotsProps">2212</template>
</MyCustom>
<!-- 子组件 -->
<view>
<template v-for="item in config">
<slot :name="item.name" :xxx="测试文字"></slot>
</template>
</view>
方案二：移除作用域参数
<!-- 父组件 -->
<MyCustom :config="[{ name: 'input' }]">
<template v-slot:input>2212</template>
</MyCustom>
方案三：手动处理slot名称映射
<!-- 子组件 -->
<view>
<template v-for="(item, index) in config">
<slot :name="`${item.name}-${index}`"></slot>
</template>
</view>