uni-app 微信小程序中 动态插槽取值时插槽会失效 配置scopedSlotsCompiler = augmented 无效
uni-app 微信小程序中 动态插槽取值时插槽会失效 配置scopedSlotsCompiler = augmented 无效
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| 操作系统 | Windows |
| 操作系统版本 | 22H2 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.99 |
| 工具版本号 | 1.06.2402040win32-x64 |
| 基础库版本 | 3.34 |
| 项目创建方式 | HBuilderX |
示例代码：
父组件
<template>
<view class="content">
<abc :list="slotList">
<template #slot1="{ slotData }">
<view>
slot1 ==== {{ slotData }}
</view>
</template>
<template #slot2>
<view>
slot2 ====
</view>
</template>
<template #slot3>
<view>
slot3 ====
</view>
</template>
</abc>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import abc from './abc.vue'
const slotList = ref([{
name: 'slot1'
},
{
name: 'slot2'
},
{
name: 'slot3'
}
])
</script>
<style>
</style>
子组件
<template>
<view>
<text>这是动态插槽的组件</text>
<template v-for="(item, index) in list" :key="index">
<view >
<slot :name="item.name" :slotData="item"></slot>
</view>
</template>
</view>
</template>
<script setup>
defineProps({
list: Array
})
</script>
<style>
</style>操作步骤：
HBuilderX创建vue3 的默认模板 或者 命令行创建的vue3模板, 都有一样的问题
预期结果：
动态插槽正常取值 正常显示
实际结果：
取值时未正常显示插槽内容
bug描述：
使用HBuilderX创建的vue3 基础模板, 代码中slot2, slot3 都可正常显示, slot1 无法正常显示内容
3 回复
在 uni-app 中，动态插槽在微信小程序中可能会遇到失效的问题，尤其是在使用 scopedSlotsCompiler 配置为 augmented 时仍然无效的情况。这个问题通常是由于微信小程序的底层实现与 uni-app 的编译机制不兼容导致的。
以下是可能的解决方案和排查步骤：
1. 确保 scopedSlotsCompiler 配置正确
在 vue.config.js 中配置 scopedSlotsCompiler 为 augmented，确保配置正确：
module.exports = {
transpileDependencies: ['uni-app'],
configureWebpack: {
plugins: [
new (require('uni-app').UniPlugin)({
scopedSlotsCompiler: 'augmented', // 确保配置正确
}),
],
},
};2. 检查动态插槽的实现
动态插槽的语法需要确保正确。例如：
<template>
<component>
<template v-slot:[dynamicSlotName]>
<!-- 插槽内容 -->
</template>
</component>
</template>
<script>
export default {
data() {
return {
dynamicSlotName: 'default', // 动态插槽名
};
},
};
</script>确保 dynamicSlotName 是一个有效的字符串，并且插槽名称正确。
3. 使用静态插槽作为替代
如果动态插槽仍然失效，可以尝试使用静态插槽作为临时解决方案。例如：
<template>
<component>
<template v-slot:default>
<!-- 插槽内容 -->
</template>
</component>
</template>4. 检查微信小程序版本
确保微信小程序基础库版本是最新的，某些问题可能是由于旧版本的底层实现导致的。
5. 使用作用域插槽的替代方案
如果动态插槽仍然无法正常工作，可以考虑使用作用域插槽的替代方案。例如，通过 props 传递数据：
<template>
<component>
<template v-slot:default="slotProps">
<!-- 使用 slotProps 渲染内容 -->
</template>
</component>
</template>