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

This肯定似乎是你的问题。你也可以这样做（如here所述）。请参见小标题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>

v-for中的VueJS插槽

2 个答案: