uni-app vue3开发 微信小程序时使用作用域插槽template变成了view的bug

uni-app vue3开发 微信小程序时使用作用域插槽template变成了view的bug

开发环境 版本号 项目创建方式
Windows win11 HBuilderX
HBuilderX 4.81
第三方开发者工具 1.06.2504030
基础库 3.10.0

示例代码：

<list class="list" ref="listRef" @onLoadmore="onLoadmore">
<template #empty="{list}" class="nim">
<view class="empty" v-if="list.length==0">
<up-empty mode="order" text="没有数据"></up-empty>
</view>
</template>
</list>


### 操作步骤：


使用插槽

预期结果：

<view class="list" >
<view class="empty" v-if="list.length==0">
<up-empty mode="order" text="没有数据"></up-empty>
</view>
</view >


### 实际结果：


```html
<view class="list" >
<view slot="empty">
<view class="empty" v-if="list.length==0">
<up-empty mode="order" text="没有数据"></up-empty>
</view>
</view>
</view >


### bug描述：


uniapp vue3 使用作用域插槽时，template 变成了view元素，但是又不能控制它的样式，破坏了本来的dom结构 导致css失效的问题！！！！！！！！！！

更多关于uni-app vue3开发 微信小程序时使用作用域插槽template变成了view的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这个不是bug，是小程序的限制，block标签上不能设置 slot 属性

更多关于uni-app vue3开发 微信小程序时使用作用域插槽template变成了view的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那就是作用域插槽 不能使用了吗？

能使用，注意一下多个标签带来的样式问题

这是一个已知的uni-app编译转换问题。在微信小程序平台，template作用域插槽会被编译为带slot属性的view元素，这是由uni-app的编译器处理机制导致的。

问题原因： 微信小程序原生不支持Vue作用域插槽语法，uni-app在编译时需要将template插槽转换为小程序可识别的slot属性写法。在转换过程中，template节点会被替换为view元素，同时保留slot属性。

解决方案：

  1. 调整CSS选择器：将原本针对template的CSS选择器改为针对带slot属性的view
.list view[slot="empty"] .empty {
  /* 原有样式 */
}
  1. 使用全局样式覆盖：通过!important强制覆盖样式
view[slot="empty"] {
  display: contents !important;
}
  1. 修改组件结构：避免在插槽内容外层使用条件渲染，改为在插槽内部处理
<list class="list" ref="listRef">
<template #empty="{list}">
  <view v-if="list.length==0" class="empty">
    <up-empty mode="order" text="没有数据"></up-empty>
  </view>
</template>
</list>
回到顶部