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>

转发器项目组件

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

控制台中会显示一条警告消息：

重复出现插槽＆＃34;默认＆＃34;在同一个渲染树中找到 - 这可能会导致渲染错误。

要使这项工作正常，需要做些什么？

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中看到。

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

1 个答案: