8***@qq.com

发布：2020-06-10 15:41
更新：2021-07-09 18:41
阅读：1802

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

分类：uni-app

bug已修复

产品分类： 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 分享

4 个回复

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

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

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>

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

辛苦了

2020-06-12 14:08

DCloud_UNI_GSQ

HBuilderX 2.8.8+ 已修复

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 }"

麻烦看到后回复下，谢谢

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

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

操作步骤：

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描述：

4 个回复

公告

相关问题

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

操作步骤： 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描述：

与内容相关的链接

4 个回复

公告

相关问题

操作步骤：

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