uni-app 循环匿名插槽添加事件后数据渲染不完全

uni-app 循环匿名插槽添加事件后数据渲染不完全

示例代码：

同样的代码 在两个不同版本的Hbuilder 3.1.22/3.1.18， 其中22版本错误，18版本正常。

其中关键位置在于 ： @click=“eTap(item)”

操作步骤：

有实例

预期结果：

有实例

实际结果：

有实例

bug描述：

循环 匿名插槽 添加事件后 数据渲染不完全

index.vue

<template>  
    <view>  
        <template v-for="item in list">  
            <view :key="item" [@click](/user/click)="eTap(item)">  
                <text>emm1</text>  
            </view>  
        </template>  
        <view class="line"></view>  
        <comA>  
            <template v-slot:default="{data,keys}">  
                <view [@click](/user/click)="eTap(item)">{{data}}</view>  
            </template>  
        </comA>  
        <view class="line"></view>  
        <comA>  
            <template v-slot:default="{data,keys}">  
                <view>{{data}}</view>  
            </template>  
        </comA>  
    </view>  
</template>  

<script>  
    import comA from "./comA/comA.vue";  
    export default {  
        components: {  
            comA  
        },  
        data() {  
            return {  
                list: [  
                    10,11,12,13,14,15,16,17,18  
                ]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            eTap(item) {  
                console.info("eTap : ",item);  
            }  
        }  
    }  
</script>  

<style>  
.line{  
    height: 1rpx;  
    width: 100%;  
    background: #007AFF;  
}  
</style>

comA.vue

<template>  
    <view>  
        <template v-for="(data,key) in list">  
            <view class="com-item" :key="key">  
                <slot :data="data" :keys="key"></slot>  
            </view>  
        </template>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [  
                    1,2,4,5,8,9  
                ]  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

Image

Image


更多关于uni-app 循环匿名插槽添加事件后数据渲染不完全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

添加这个配置试看一下。可能跟这个有关 “mp-weixin”: {
scopedSlotsCompiler: “legacy”
}

更多关于uni-app 循环匿名插槽添加事件后数据渲染不完全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


卧槽 还真的是，根本没有发现有这个属性，微信里面也没有说

这是一个HBuilderX 3.1.22版本中的已知bug，涉及匿名插槽在循环中绑定事件时的渲染问题。

从你的代码和截图可以看出：

  1. 第一个直接循环渲染正常
  2. 第二个通过comA组件循环匿名插槽并绑定@click事件时，数据渲染不完全（只显示了部分数据）
  3. 第三个通过comA组件循环匿名插槽但不绑定事件时，渲染正常

问题原因： HBuilderX 3.1.22版本在编译处理匿名插槽时，当插槽内容包含事件绑定且处于循环中，可能会错误地优化或处理插槽内容，导致部分数据未能正确渲染。

临时解决方案：

  1. 降级HBuilderX：暂时使用3.1.18版本（如你测试的正常版本）
  2. 避免匿名插槽：给插槽命名，使用具名插槽
  3. 事件代理：在comA组件内部处理点击事件，通过$emit传递数据

修改建议：

// comA.vue中修改
<template v-for="(data,key) in list">
    <view class="com-item" :key="key" [@click](/user/click)="$emit('item-click', data)">
        <slot :data="data" :keys="key"></slot>
    </view>
</template>

// 父组件中使用
<comA [@item-click](/user/item-click)="eTap">
    <template v-slot:default="{data}">
        <view>{{data}}</view>
    </template>
</comA>
回到顶部