首页 文章

v-for中的VueJS插槽

提问于
浏览 次
2

我想制作一个网格组件，它接受插槽作为附加列单元格 .

<grid>
  <td slot="additional-column">...</td>
</grid>

在实际组件中：

<template>
   <table>
     <div v-for="item in items">
       ...
       <slot name="additional-column"></slot>
     </div>
   </table>
</template>

不幸的是，插槽开始重复，这是vuejs不喜欢的东西 .

在同一渲染树中找到重复出现的插槽“additional-column” - 这可能会导致渲染错误 .

有谁知道我该如何处理这个问题？

提前致谢！

vue.js

2 回答

  • 5

    This肯定似乎是你的问题 . 你也可以这样做（如here所述） . 见副 Headers Destructuring 之前的最后一段 .

    家长：

    <grid>
  <td :slot="['additional-column', item].join('-')" v-for="item in items">
  ...
  </td>
</grid>

    儿童：

    <table>
    <div v-for="item in items">
        ...
        <slot :name="['additional-column', item].join('-')"></slot>
    </div>
</table>

    PS：我没试过这个 . 如果你有困难我可以创造一个小提琴和分享 .

    回复于
  • 1

    使项目成为嵌套组件（您将使用 v-for 重复该项目）并在该特定组件中呈现 additional-column 插槽 .

    这是解决这个问题的正确方法 . 这个想法是你需要有一个单独的插槽，每个组件都有一个特定的名称 .

    也就是说，你可以这样做，这是一个非常粗略的版本，但很好地概述了这个想法：

    <!-- Grid Template -->
<template>
  <table>
    <GridItem :item="item" v-for="item in items">
      <!-- Maybe even pass that column conditionally, based on the item data -->
      <div slot="additional-column">
        Content of column
      </div>
    </GridItem>
  </table>
</template>


<!-- GridItem Template -->
<template>
  <div>
    <div>Column 1</div>
    <div>Column 2</div>
    <slot name="additional-column" />
  </div>
</template>
    回复于

相关问题