8***@qq.com
8***@qq.com
  • 发布:2020-06-10 15:41
  • 更新:2021-07-09 18:41
  • 阅读:1916

【报Bug】slot插槽中点击事件作用域异常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win 10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphone 8 plus (系统版本13.5)

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
  • father.vue

    <template>  
    <view>  
        <view v-for="(el, ind) in list" :key="ind">  
            <test-component :list="el">  
                <template #test="{ sendList }">  
                    <view  
                        class="test-item"  
                        v-for="(item, index) in sendList"   
                        :key="index"  
                        hover-class="navigator-hover"  
                        @click="handleClick(ind, item)"  
                    >{{ item }}</view>  
                </template>  
            </test-component>  
        </view>  
    </view>  
    </template>  
    <script>  
    import testComponent from './testComponent.vue';  
    export default {  
        data() {  
            return {  
                // 将要组件处理的数据(这里去掉--后用slot渲染出来)  
                list: [  
                    ['A--', 'B--', 'C--'],  
                    ['北京--', '上海--'],  
                    ['1--', '2--', '3--']  
                ]  
            }  
        },  
        components: {  
            testComponent  
        },  
        methods: {  
            // 点击时总是显示第一条ABC数据,并且ind也总是0  
            handleClick(ind, item) {  
                console.log(ind)  
                console.log(item)  
            }  
        }  
    }  
    </script>  
    <style>  
    .test-item {  
        line-height: 100rpx;  
        text-align: center;  
    }  
    </style>
  • testComponent.vue

    <template>  
    <view>  
        <slot name="test" :send-list="sendList"></slot>  
    </view>  
    </template>  
    <script>  
    export default {  
        props: {  
            list: {  
                type: Array,  
                default: () => []  
            }  
        },  
        computed: {  
            sendList() {  
                return this.list.map(item => item.replace(/--/, ''))  
            }  
        }  
    }  
    </script>

操作步骤:

father.vue: page页
testComponent.vue 放入同级目录
从上往下依次点击

预期结果:

应该打印:
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3

实际结果:

苹果上打印:
0 A,0 B,0 C
0 A,0 B
0 A,0 B,0 C

微信开发者工具:
null A,null B,null C
null 北京,null 上海
null 1,null 2,null 3

内置浏览器:(正确)
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3

bug描述:

手机运行下:子组件中使用slot,在父组件中循环该子组件,插槽内元素的点击事件中传入的参数总是指向第一个子组件的数据。
且不同平台的打印结果全都不一致

2020-06-10 15:41 负责人:DCloud_UNI_FXY 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

可以来人帮忙看看吗,很着急

DCloud_UNI_FXY

DCloud_UNI_FXY

1.App端预计下个Alpha版本修复该问题
2.微信端修复方案

<test-component :list="el" :ind="ind">  
                <template #test="{ sendList,ind }">  
                    <view class="test-item" v-for="(item, index) in sendList" :key="index" hover-class="navigator-hover"  
                        @click="handleClick(ind, item)">{{ item }}</view>  
                </template>  
            </test-component>
DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX 2.8.8+ 已修复

1***@163.com

1***@163.com

我的hx版本是你们最新的,但是作用域插槽问题还是没有解决!
代码如下:
// 子组件用的是 v-for 中循环的变量 item

 <slot :defalut="item"></slot>

// 父组件引用如下

<template v-slot="slotprops">  
    {{slotprops}}  
</template>

这里还有个问题
Errors compiling template:
18:11:58.059 目前仅支持解构插槽 slotprops,如 v-slot="{ user }"

麻烦看到后回复下,谢谢

该问题目前已经被锁定, 无法添加新回复