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
在父组件这样用插槽
<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>

