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

【报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)

预期结果:

实际结果:

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}",这个地方加一个:就能获取了

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容