uni-app 循环里写插槽运行到微信小程序不停报错
uni-app 循环里写插槽运行到微信小程序不停报错
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| 操作系统 | Windows |
| 操作系统版本 | win7 |
| 开发工具 | HBuilderX |
| 工具版本 | 3.2.6 |
| 第三方工具 | stable 1.05.2107090 |
| 基础库 | 2.19.3 |
| 项目创建方式 | HBuilderX |
示例代码:
组件
<template>
<view class="testcomponent">
<block v-for="row in list" :key="row.id">
<slot name="rowContent" :row="row"></slot>
</block>
</view>
</template>
页面
<template>
<view class="content">
<testcomponent :list="list">
<template slot="rowContent" slot-scope="{ row }">
<text class="text">{{row.name}}</text>
</template>
</testcomponent>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{id:1,name:"测试1"},
{id:2,name:"测试2"},
{id:3,name:"测试3"},
{id:4,name:"测试4"},
{id:5,name:"测试5"},
{id:6,name:"测试6"},
{id:7,name:"测试7"},
{id:8,name:"测试8"},
{id:9,name:"测试9"},
{id:10,name:"测试10"},
{id:11,name:"测试11"},
{id:12,name:"测试12"},
{id:13,name:"测试13"},
{id:14,name:"测试14"},
{id:15,name:"测试15"},
{id:16,name:"测试16"},
{id:17,name:"测试17"},
{id:18,name:"测试18"},
{id:19,name:"测试19"},
]
}
}
}
</script>
操作步骤:
运行示例代码
预期结果:
不报错
实际结果:
不停的报slot “” duplication is found under a single shadow root. The first one was accepted
bug描述:
循环里面写slot就会报错,scopedSlotsCompiler设置legacy、auto、augmented都不行。
更多关于uni-app 循环里写插槽运行到微信小程序不停报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
为什么2022年了还有这问题
这个问题还是存在啊 循环嵌套问题
在 uni-app 的循环中使用作用域插槽(scoped slot)时,微信小程序端确实可能出现 slot duplication 错误。这是因为微信小程序原生的 slot 实现机制与 Vue 的插槽机制存在差异,尤其是在循环场景下。
核心问题:微信小程序的 slot 不支持在同一个模板中动态生成多个同名的 slot 节点。当你在 v-for 循环内使用 <slot name="rowContent"> 时,编译到小程序平台后,会尝试创建多个名称相同的 slot,这违反了微信小程序的规则。
解决方案(二选一):
-
将循环逻辑移至使用插槽的父组件/页面
这是最直接且稳定的做法。避免在子组件的循环内定义插槽,改为在父组件中循环调用子组件,并通过 prop 传递数据。调整后的示例:
子组件 (testcomponent.vue):
<template> <view class="testcomponent"> <slot name="rowContent" :row="rowData"></slot> </view> </template> <script> export default { props: ['rowData'] } </script>页面:
<template> <view class="content"> <block v-for="row in list" :key="row.id"> <testcomponent :rowData="row"> <template slot="rowContent" slot-scope="{ row }"> <text class="text">{{row.name}}</text> </template> </testcomponent> </block> </view> </template>

