uni-app 【报Bug】vue2+cli创建的项目设置"scopedSlotsCompiler": "augmented"后，抖音和小红书小程序循环渲染slot异常，只渲染第一个

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 【报Bug】vue2+cli创建的项目设置"scopedSlotsCompiler": "augmented"后，抖音和小红书小程序循环渲染slot异常，只渲染第一个

操作步骤：

<template>  
  <view>  
    <view v-for="(item, index) in list" :key="index">  
      <slot :item="item"></slot>  
    </view>  
  </view>  
</template>

<template>  
  <view class="content">  
    <Test :list="[1, 2, 4]">  
      <template v-slot:default="{ item }">{{ item }}</template>  
    </Test>  
  </view>  
</template>

{
  "mp-toutiao": {  
    "scopedSlotsCompiler": "augmented",  
    "usingComponents": true  
  }
}

预期结果：

父组件显示传入的数组内容1,2,4,

实际结果：

只渲染了传入数组的第一个值：1,1,1

bug描述：

“scopedSlotsCompiler"默认为auto的时候会报错“主包不能引用分包文件”，看了论坛之后改成了"scopedSlotsCompiler”: “augmented”，这样的话编译确实通过了，但是实际打包头条和小红书小程序后，插槽传值始终都是1个；具体如图

开发环境 版本号 项目创建方式
Windows WIN10，22H2 CLI
第三方开发者工具 vscode 1.91.1 -
基础库版本号 2.0.2-4020420240722003 -
CLI版本号 5.0.8 -

Harmonyos Next教程
3 回复

社区是凉了吗


收到，感谢反馈

在uni-app中使用Vue 2结合CLI创建项目时，如果遇到在特定小程序平台（如抖音和小红书）上，设置了"scopedSlotsCompiler": "augmented"后，循环渲染slot只渲染第一个的问题，这通常是由于这些平台对Vue scoped slots的支持不完全或者存在bug。

为了绕过这个问题，可以考虑以下几种方法，这里主要提供一个通过编程方式动态生成内容的替代方案，而不是直接使用scoped slots。这种方案可以避免对scoped slots的依赖，从而可能解决渲染问题。

解决方案：使用组件和v-for动态渲染内容

  1. 创建一个通用的渲染组件：这个组件接受一个数组作为输入，并基于这个数组动态渲染内容。
<!-- RenderItem.vue -->
<template>
  <div v-for="(item, index) in items" :key="index">
    <slot :name="'item-' + index" :item="item"></slot>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>
  1. 在主组件中使用这个渲染组件：
<template>
  <view>
    <RenderItem :items="list">
      <template v-for="(item, index) in list">
        <template #[`item-${index}`]="{ item }">
          <!-- 这里可以自定义每个item的渲染逻辑 -->
          <view>{{ item.name }}</view>
        </template>
      </template>
    </RenderItem>
  </view>
</template>

<script>
import RenderItem from './RenderItem.vue';

export default {
  components: {
    RenderItem
  },
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    };
  }
}
</script>

在这个解决方案中，我们创建了一个RenderItem组件，它接受一个items数组，并使用v-for循环渲染每个项目。主组件通过v-for为每个item动态生成一个具名slot，并通过RenderItem组件的上下文插槽(<slot>)来渲染这些内容。

这种方法避免了直接使用scoped slots，并且利用了Vue的动态组件和插槽功能来实现类似的效果。虽然这种方法增加了一些模板的复杂性，但它提供了一种可行的替代方案，特别是在遇到特定平台对scoped slots支持不佳的情况下。

回到顶部