uniapp微信小程序端使用slot报错
错误:uniapp编译成微信小程序后,显示的值为空
页面报错:
Errors compiling template:
目前仅支持解构插槽 slotProps,如 v-slot="{ user }"
ListBigImgComponent组件
vue
<list-component
:list="bigImgList"
v-slot="slotProps"
@clickHandler="clickHandler"
>
<list-item-big-img-component
:item="slotProps.item"
></list-item-big-img-component>
</list-component>
ListComponent组件
vue
<ul class="list-ul">
<li
class="list-li"
v-for="item in list"
:key="item.id"
@click="clickHandle(item.id)"
>
<slot :item="item"></slot>
</li>
</ul>
ListItemBigImgComponent组件
vue
<view class="list-item-big-img-component">
<image
mode="scaleToFill"
class="big-img"
:src="item.url"
/>
<view class="bottom">
<view class="title-level">
<view class="title">{{item.title}}</view>
<view class="level">{{item.level}}</view>
</view>
</view>
</view>
解决办法:单独设置微信小程序端的代码,v-slot使用解构赋值(弃)
ListBigImgComponent组件
vue
<!-- #ifdef MP-WEIXIN -->
<list-component
:list="bigImgList"
v-slot="{ item }"
@clickHandler="clickHandler"
>
<list-item-big-img-component
:item="item"
></list-item-big-img-component>
</list-component>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<list-component
:list="bigImgList"
v-slot="slotProps"
@clickHandler="clickHandler"
>
<list-item-big-img-component
:item="slotProps.item"
></list-item-big-img-component>
</list-component>
<!-- #endif -->
最佳的解决办法:v-slot全部使用解构
js
<list-component
:list="titleDateList"
v-slot="{ item }"
@clickHandler="clickHandler"
>
<list-item-title-date-component
:item="item"
></list-item-title-date-component>
</list-component>