c***@163.com
c***@163.com
  • 发布:2024-09-14 11:26
  • 更新:2024-09-14 15:11
  • 阅读:80

【报Bug】$scopedSlots里有插槽信息,但是取不到

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.0.1 (22A400)

第三方开发者工具版本号: VSCode1.89.0 (Universal)

基础库版本号: 3.5.6

项目创建方式: CLI

CLI版本号: ^2.0.2-4010520240507001

示例代码:

自定义组件ft-test:

<template>  
    <view class="ft-test">  
        <view v-for="(p, index) in protocols" :key="index">  
            <slot name="test-slot" :protocol="p">  
                <text>test-slot-{{ index }},</text>  
            </slot>  
            第{{ index }}条数据  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'ft-test',  
    props: {  
        protocols: {  
            type: Array,  
            default: () => []  
        }  
    },  
    data() {  
        return {}  
    },  
    created() {  
        console.log('ft-test-this----', this, this.$slots)  
        console.log('ft-test-$scopedSlots----', this.$scopedSlots)  
    }  
}  
</script>

页面中使用ft-test组件:

<ft-test :protocols="[{title: '步骤1'}, {title: '步骤2'}, {title: '步骤3'}]">  
        <text slot="test-slot" slot-scope="{protocol}">test-slot-{{ protocol.title }},</text>  
</ft-test>

操作步骤:

在自定义组件中输出:

console.log('ft-test-$scopedSlots----', this.$scopedSlots)

预期结果:
{test-slot: true}

实际结果:
{}

bug描述:

1、自定义组件中v-for中设置了作用域slot
2、页面使用自定义组件并设置slot后
3、自定义组件中通过console.log获取不到this.$scopedSlots.slotname,在template区直接使用$scopedSlots.slotname也获取不到
4、自定义组件中console.log(this)是可以看到$scopedSlots.slotname有值的

2024-09-14 11:26 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

你是写法有问题吧,看起来在:slot-scope="{protocol}",这个地方加一个:就能获取了

要回复问题请先登录注册