Skip to content

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>

如有转载或 CV 的请标注本站原文地址