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)
};
};
1 个回复
l***@163.com (作者) - 识时务者为俊杰
经过测试发现,多套一层就可以解决该问题了