Question

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

子组件：

<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>

像这样可行吗？如果不是，那么考虑我无法编辑子组件，这可能是可行的解决方法？

谢谢。

Answer 1

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

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

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

1 个答案: