Vue.js中子组件中迭代槽的迭代槽内容

Posted 2023-02-23

【中文标题】Vue.js中子组件中迭代槽的迭代槽内容

【英文标题】：Iterating slot content for iterated slots in child component in Vue.js

【发布时间】：2020-12-27 01:16:56

【问题描述】：

我有一个子组件（我无法编辑），其中对象中的每一行都在具有特定插槽的 div 内呈现，并且我需要为每个元素从父级传递数据。我正在尝试遍历父组件中对象的每个元素，生成一个插槽并将所需的代码传递给子组件，但不幸的是我无法做到，也找不到任何支持我的材料。

子组件：

<div class="slotchildren" v-for="(child, childindex) in row.elementChildren" :key="childindex">

  <span>element nr. child.id</span>
  <slot :name="`element-child-$row[idlabel]-$childindex`" :row="child">
    ...
  </slot>
</div>

父组件（不工作）：

<template v-for="row in rows"> -->
  <template  v-slot:`element-row-$row.id`="row">
        
        //--> [vue/valid-v-slot] 'v-slot' directive doesn't support any modifier
        //--> [vue/valid-v-slot] 'v-slot' directive must be owned by a custom element, but 'template' is not.

    <span>row.name</span>

  </template>
</template>

这样的事情可行吗？如何实现？如果不是，考虑到我无法编辑子组件，有什么可行的解决方法？

提前致谢。

【参考方案1】：

我用以下合成器解决了它：

<template v-for="row in rows" v-slot:[`element-row-$row.id`]>
  ..
</template>