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都不行。

测试for循环插槽.zip


更多关于uni-app 循环里写插槽运行到微信小程序不停报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

置顶一下

更多关于uni-app 循环里写插槽运行到微信小程序不停报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


为什么2022年了还有这问题

这个问题还是存在啊 循环嵌套问题

在 uni-app 的循环中使用作用域插槽(scoped slot)时,微信小程序端确实可能出现 slot duplication 错误。这是因为微信小程序原生的 slot 实现机制与 Vue 的插槽机制存在差异,尤其是在循环场景下。

核心问题:微信小程序的 slot 不支持在同一个模板中动态生成多个同名的 slot 节点。当你在 v-for 循环内使用 <slot name="rowContent"> 时,编译到小程序平台后,会尝试创建多个名称相同的 slot,这违反了微信小程序的规则。

解决方案(二选一):

  1. 将循环逻辑移至使用插槽的父组件/页面
    这是最直接且稳定的做法。避免在子组件的循环内定义插槽,改为在父组件中循环调用子组件,并通过 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>
回到顶部