uni-app 二次封装组件 v-for结合$slots透传插槽失败

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

uni-app 二次封装组件 v-for结合$slots透传插槽失败

开发环境 版本号 项目创建方式
Windows windows10 HBuilderX

操作步骤：

<template>  
    <view class="content" style="margin-top: 40px;">  
        <navbar>  
            <template #left>  
                <view>左侧插槽内容</view>  
            </template>  
            <template #right>  
                <view>右侧插槽内容</view>  
            </template>  
        </navbar>  
    </view>  
</template>  

<script setup>  
    import navbar from "@/components/navbar.vue"  
</script>

<template>  
    <view class="navbar">  
        <wxNavbar>  
               <template v-for="(value, name) in $slots" #[name]>  
                <slot :name="name"></slot>  
            </template>   
        </wxNavbar>  
    </view>  
</template>  

<script setup>  
    import wxNavbar from './wx-navbar.vue';  
</script>

<template>  
    <view class="wx-navbar">  
        <slot name="left">左侧默认内容</slot>  
        <slot name="right">右侧默认内容</slot>  
    </view>  
</template>

预期结果：

页面展示文本 “左侧插槽内容 右侧插槽内容” 将navbar组件中的v-for内容替换为具名插槽写法即可看到预期结果

<template #left>  
    <slot name="left"></slot>  
</template>  
<template #right>  
    <slot name="right"></slot>  
</template>

实际结果：

页面展示文本 “左侧默认内容 右侧侧默认内容”

bug描述：

在二次封装的组件中通过v-for和$slots实现插槽透传失败，将v-for替换为具名插槽时成功


Harmonyos Next教程
3 回复

我也遇到了，请问解决了吗


没有，插槽不多，我直接写死了

在 uni-app 中进行二次封装组件时，如果遇到 v-for 结合 $slots 透传插槽失败的问题，通常是因为插槽内容的处理和传递方式不正确。下面是一个示例代码，展示了如何在二次封装组件中正确地使用 v-for 和 $slots。

父组件

首先，定义一个父组件，该组件将使用二次封装的子组件，并传递一个插槽内容。

<template>
  <view>
    <custom-list :items="itemList">
      <template v-slot:item="{ item }">
        <view>{{ item.name }} - {{ item.value }}</view>
      </template>
    </custom-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { name: 'Item 1', value: 'Value 1' },
        { name: 'Item 2', value: 'Value 2' },
      ],
    };
  },
};
</script>

二次封装组件（CustomList.vue）

接下来，定义二次封装的子组件 CustomList，该组件将接收一个 items 属性，并使用 v-for 渲染列表项，同时透传插槽内容。

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

<script>
export default {
  name: 'CustomList',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
};
</script>

解释

  1. 父组件：父组件定义了一个 itemList 数组，并使用 custom-list 组件。在 custom-list 组件中，使用了一个具名插槽 item，并通过作用域插槽传递了 item 对象。

  2. 二次封装组件（CustomList.vue）：该组件接收一个 items 属性，并使用 v-for 指令遍历 items 数组。对于每个 item，使用 <slot> 元素并指定 name="item"，同时通过 :item="item" 将当前项作为插槽作用域对象传递。

这种方式确保了插槽内容能够正确地被透传到二次封装组件中，并且能够在 v-for 循环中正确渲染。如果你遇到插槽透传失败的问题，检查以下几点：

  • 确保插槽名称和作用域对象在父组件和子组件中一致。
  • 确保在子组件中正确使用了 v-for 和 <slot> 元素。
  • 确保父组件正确使用了作用域插槽语法。

通过上述代码示例和解释，你应该能够在 uni-app 中正确地实现二次封装组件中的 v-for 和 $slots 插槽透传。

回到顶部