vue.js - v-for中的VueJS插槽

我想制作一个网格组件，它接受额外的列单元格作为插槽。

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

在实际组件中:

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

不幸的是，广告位开始重复出现，这是vuejs不喜欢的。



有人知道我该怎么处理吗？

提前致谢!

最佳答案

This绝对是您的问题。您也可以通过这种方式进行操作(如here所述)。参见副标题Destructuring的最后一段。

上级:

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

child :

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

PS:我还没有尝试过。如果您有困难，我可以制造一个 fiddle 和分享。

关于vue.js - v-for中的VueJS插槽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47718833/