v-for中的VueJS插槽

Question

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

<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" - 这可能会导致渲染错误.

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

提前致谢!

Answer 1

这肯定是你的问题.你也可以这样做(如这里所述).见小标题前的最后一段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:我没试过这个.如果你有困难我可以创造一个小提琴和分享.

Answer 2

使项目成为嵌套组件（您将重复使用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>