uni-app 插槽内无法取到插槽参数值,总是为undefined

uni-app 插槽内无法取到插槽参数值,总是为undefined

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 Catalina 10.15.5
HBuilderX类型 正式
HBuilderX版本 3.2.12
工具版本 1.05.2111051
基础库版本 2.20.2
项目创建方式 HBuilderX

操作步骤:

参考代码

预期结果:

在插槽内能正确取到插槽参数

实际结果:

插槽内取到的参数始终为undefined。scopedSlotsCompiler设置为legacy、auto或argumented结果都一样

bug描述:

组件代码如下:

<template>  
    <uni-swiper-dot :info="items" :current="currentAlt" mode="dot">  
        <swiper :current="current" :autoplay="autoplay" indicator-dots indicator-color="#FFFFFF"  
            indicator-active-color="#000000"  
            :style="{height: height + 'px'}"  
            @change="$emit("change", item)">  
            <swiper-item v-for="(item, index) in items" :key="index">  
                <slot :item="item" :index="index" />  
            </swiper-item>  
        </swiper>  
    </uni-swiper-dot>  
</template>  

<script>  
    export default {  
        props: {  
            items: {  
                type: Array,  
                default: []  
            },  
            height: {  
                type: Number,  
                default: 225  
            },  
            autoplay: {  
                type: Boolean,  
                default: false  
            }  
        },  
        data() {  
            return {  
                current: 0,  
                currentAlt: 0  
            }  
        },  
        methods: {  
        }  
    }  
</script>

调用组件代码如下:

<template>  
    <view>  
        <custom-swiper  
            :items="config.swipes" :height="style.swiperHeight" :autoplay="autoplay"  
            #default="{item, index}"  
        >  
            <image :id="'swiper-'+index" :src="item.images[0].url"  
                :mode="showLarge ? 'widthFix' : 'aspectFill'"  
            />  
        </custom-swiper>  
    </view>  
</template>

执行时报错:
[Vue warn]: Property or method “item” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

—> <NavSwiper> at pages/component/navSwiper.vue
pages/index.vue(env: macOS,mp,1.05.2111051; lib: 2.16.1)


更多关于uni-app 插槽内无法取到插槽参数值,总是为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

在父组件这样用插槽 <template #default="{item,index}"></template>

更多关于uni-app 插槽内无法取到插槽参数值,总是为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的代码语法没问题的

回复 gweii: 我知道

你这个解决了吗,我的也是这样

这个问题是由于在 uni-swiper-dot 组件内部使用作用域插槽时,插槽参数传递方式不正确导致的。

在你的组件代码中,虽然你在 swiper-item 内部使用了作用域插槽:

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

但在调用组件时,作用域插槽的语法需要调整。当前使用的 #default="{item, index}" 语法在某些版本的 uni-app 中可能不被正确解析。

解决方案:

修改调用组件的代码,使用 v-slot 语法:

<template>  
    <view>  
        <custom-swiper  
            :items="config.swipes" 
            :height="style.swiperHeight" 
            :autoplay="autoplay"
        >  
            <template v-slot="{item, index}">
                <image 
                    :id="'swiper-'+index" 
                    :src="item.images[0].url"
                    :mode="showLarge ? 'widthFix' : 'aspectFill'"
                />  
            </template>
        </custom-swiper>  
    </view>  
</template>

或者使用简写方式:

<custom-swiper  
    :items="config.swipes" 
    :height="style.swiperHeight" 
    :autoplay="autoplay"
>  
    <template #default="{item, index}">
        <image 
            :id="'swiper-'+index" 
            :src="item.images[0].url"
            :mode="showLarge ? 'widthFix' : 'aspectFill'"
        />  
    </template>
</custom-swiper>
回到顶部