l***@163.com
l***@163.com
  • 发布:2022-11-04 10:55
  • 更新:2022-11-04 11:49
  • 阅读:193

【报Bug】循环嵌套插槽的时候会报错( slotName is not defined )

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.6

第三方开发者工具版本号: 1.06.2210310

基础库版本号: 2.27.0

项目创建方式: CLI

CLI版本号: @vue/cli 4.5.12

示例代码:

up-cell 组件:

<template>  
  <view>  
    <slot name="title"></slot>  
    <slot name="desc"></slot>  
  </view>  
</template>

up-cell-button组件:

<template>  
  <button>  
    <up-cell>  
      <template v-for="(v, slotName) in slots" :key="slotName" v-slot[slotName]>  
        <slot :name="slotName"></slot>  
      </template>  
    </up-cell>  
  </button>  
</template>  

<script setup lang="ts">  
import { useSlots } from "vue";  

const slots = useSlots();  
</script>

微信开发工具控制台报错:

ReferenceError: slotName is not defined  
    at Proxy.<anonymous> (index.js? [sm]:25)  
    at renderComponentRoot (vendor.js? [sm]:4905)  
    at ReactiveEffect.componentUpdateFn [as fn] (vendor.js? [sm]:4977)  
    at ReactiveEffect.run (vendor.js? [sm]:1635)  
    at setupRenderEffect (vendor.js? [sm]:5005)  
    at mountComponent (vendor.js? [sm]:4878)  
    at createComponent3 (vendor.js? [sm]:5034)  
    at $createComponent (vendor.js? [sm]:5989)  
    at zo.attached (vendor.js? [sm]:6081)  
    at i.safeCallback (WASubContext.js?t=wechat&s=1667526420975&v=2.27.0:1)(env: macOS,mp,1.06.2209190; lib: 2.27.0)

查看编译后的源码的代码是因为js中 b: common_vendor.d([slotName]) 代码中的 slotName 没有定义

up-cell-button/index.wxml

<button>  
  <up-cell u-s="{{b}}" u-i="3f00cf2a-0" bind:__l="__l">  
    <view wx:for="{{a}}" wx:for-item="v" wx:key="b" slot="{{v.c}}">  
      <slot name="{{v.a}}"></slot>  
    </view>  
  </up-cell>  
</button>

up-cell-button/index.js

return (_ctx, _cache) => {  
      return {  
        a: common_vendor.f(common_vendor.unref(slots), (v, slotName2, i0) => {  
          return {  
            a: common_vendor.d(slotName2 + "-" + i0),  
            b: slotName2,  
            c: common_vendor.d(slotName2)  
          };  
        }),  
        b: common_vendor.d([slotName]),  
        c: common_vendor.n(prefixCls)  
      };  
    };

操作步骤:

使用 3.6.2.20220914 以上版本进行编写上面的代码即可重现

预期结果:

能正常显示插槽内容

实际结果:

不能正常显示插槽内容

bug描述:

循环嵌套插槽的时候会报错( slotName is not defined )

在 3.6.2.20220914 以上版本以及当前正式版本的时候都会报错,也只能使用v-slot写法不能使用slot写法

<template v-for="(v, slotName) in slots" :key="slotName" v-slot[slotName]>  
 <slot :name="slotName"></slot>  
</template>

在 3.5.3.20220729 版本的时候下面这样写是可以正常显示的

<template v-for="(v, slotName) in slots" :key="slotName" :slot="slotName">  
 <slot :name="slotName"></slot>  
</template>
2022-11-04 10:55 负责人:无 分享
已邀请:
l***@163.com

l***@163.com (作者) - 识时务者为俊杰

经过测试发现,多套一层就可以解决该问题了

<up-cell>  
      <template v-for="(v, slotName) in slots" :key="slotName">    
        <template #[slotName]>  
          <slot :name="slotName"></slot>  
        </template>  
      </template>  
</up-cell>

要回复问题请先登录注册