如何将 Vue 插槽范围与嵌套组件一起使用

Question

我很难知道在哪里使用 slot-scope 属性并理解​​文档。

这是我需要做的简化版本。你可以看到它在这里运行：https://jsfiddle.net/4j4zsy0g/

主代码 - 只需将repeater 组件与要重复的内容一起使用

<repeater :ids="['a','b','c']">
  <h3>My Title</h3>
  <another-component/>
</repeater>

中继器组件

<script id="repeater" type="text/x-template">
  <div class="repeater">
    <repeater-item v-for="id in ids" :key="id">
      <h2>Item {{id}}</h2>
      <slot></slot>
    </repeater-item>
  </div>
</script>

repeater-item 组件

<script id="repeater-item" type="text/x-template">
  <div class="repeater-item">
    <h1>Repeater Item</h1>
    <slot></slot>
  </div>
</script>

示例部分

<script id="another-component" type="text/x-template">
  <div class="sample">
    Main content - should be in each repeater item
  </div>
</script>

渲染时，这是输出。可以看到示例内容只显示了一次。

<div class="repeater">
  <div class="repeater-item">
    <h1>Repeater Item</h1>
    <h2>Item a</h2>
    <h3>My Title</h3>
    <div class="sample">Main content - should be in each repeater
    item</div>
  </div>
  <div class="repeater-item">
    <h1>Repeater Item</h1>
    <h2>Item b</h2>
    <h3>My Title</h3>
  </div>
  <div class="repeater-item">
    <h1>Repeater Item</h1>
    <h2>Item c</h2>
    <h3>My Title</h3>
  </div>
</div>

并在控制台中显示警告消息：

在同一渲染树中发现重复的“默认”插槽 - 这可能会导致渲染错误。

需要做什么才能使这项工作正常进行？

Answer 1

解决这个问题的方法是将repeater 的内容包装在另一个元素中。该元素需要有一个属性slot-scope。属性的值无关紧要。该元素可以是template 或任何其他元素。

<repeater :ids="['a','b','c']">
  <template slot-scope="x">
    <h3>My Title</h3>
    <another-component/>
  </template>
</repeater>

这可以在 Simon Herteby 的 jsFiddle 中看到。