uni-app v-for里的slot编译有问题
uni-app v-for里的slot编译有问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | x64 | HBuilderX |
操作步骤：
- 直接编译
预期结果：
<view wx:for="{{a}}" wx:for-item="item" wx:key="c"><slot name="{{item.a}}"></slot></view>
实际结果：
<view wx:for="{{a}}" wx:for-item="item" wx:key="c"><slot name="{{item.a}}"></slot><slot></slot></view>
bug描述：
<view v-for="(item, index) in dataList" :key="item.id" >
<slot :data="item"></slot>
</view>
编译成微信小程序多了一个<slot></slot>
<view wx:for="{{a}}" wx:for-item="item" wx:key="c"><slot name="{{item.a}}"></slot><slot></slot></view>
导致报错
More than one slot named "" are found inside a single component instance (in component "components/test-slot").
更多关于uni-app v-for里的slot编译有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
临时解决方案
找到 HX根目录/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/template/codegen.js
搜索 function genNode(node, context)
在上面添加以下代码
function isInVFor(node) {
while (node) {
if ((0, vFor_1.isForElementNode)(node)) {
return true;
}
node = node.parent;
}
return false;
}
搜索 const isVIfSlot = (0, vIf_1.isIfElementNode)(node)
在上面添加
if (isInVFor(node)) {
return genSlot(node, context);
}
找到 HX根目录/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/transform.js
搜索 context.parent = parent;
在上面添加 child.parent = parent;
这是一个已知的uni-app编译问题。在v-for循环中使用具名slot时，编译器会错误地生成一个额外的默认slot。
临时解决方案：
- 避免在v-for中直接使用具名slot
- 改用作用域slot：
<view v-for="(item, index) in dataList" :key="item.id">
<slot :data="item"></slot>
</view>
- 或者将slot内容封装为子组件：
<view v-for="(item, index) in dataList" :key="item.id">
<child-component :data="item"></child-component>
</view>