javascript - vue组件具名slot遍历问题

Question

我遇到一个使用具名slot的问题，下面是我在子组件中定义的slot

<p class="v-tabs-item" v-for="item in source">
  <slot name="slot-item-{{$index}}"></slot>
</p>

它去遍历了一个数组，数组如下：

source: [
    {
      title: '选项卡一',
      content: '选项卡一的内容'
    },
    {
      title: '选项卡二',
      content: '选项卡二的内容'
    },
    {
      title: '选项卡三',
      content: '选项卡三的内容'
    }
  ]

理论上组件中会生成如下代码：

<p class="v-tabs-item">
  <slot name="slot-item-0"></slot>
</p>
<p class="v-tabs-item">
  <slot name="slot-item-1"></slot>
</p>
<p class="v-tabs-item">
  <slot name="slot-item-2"></slot>
</p>

下面是我在html文档中定义的等待用来替换slot的内容：

  <p slot="slot-item-{{$index}}" v-for="item in source">{{item.content}}</p>

理论上它也会生成：

  <p slot="slot-item-0">选项卡一的内容</p>
  <p slot="slot-item-1">选项卡二的内容</p>
  <p slot="slot-item-2">选项卡三的内容</p>

这样的话刚好有一一对应的具名slot能够替换，可是，实际上，我却在最后的html中得到了这样的代码：

<p class="v-tabs-item">
  <p slot="slot-item-0">选项卡一的内容</p>
  <p slot="slot-item-1">选项卡二的内容</p>
  <p slot="slot-item-2">选项卡三的内容</p>
</p>
<p class="v-tabs-item">
  <p slot="slot-item-0">选项卡一的内容</p>
  <p slot="slot-item-1">选项卡二的内容</p>
  <p slot="slot-item-2">选项卡三的内容</p>
</p>
<p class="v-tabs-item">
  <p slot="slot-item-0">选项卡一的内容</p>
  <p slot="slot-item-1">选项卡二的内容</p>
  <p slot="slot-item-2">选项卡三的内容</p>
</p>

不是很明白，跪求指教，不胜感激！

Answer 1

// 子组件
<p class="v-tabs-item">
  <slot name="slot-item-{{$index}}"></slot>
</p>

//父组件
<p class="v-tabs" v-for="item in source">
    <p class="v-tabs-item">
      <p slot="slot-item-{{$index}}">{{item.content}}</p>
    </p>
</p>

你试试看这样行不行？感觉你的子组件不需要那个v-for。

Answer 2

這確實是 Vue 的一個坑，尤大在這個 issue 裡面有解釋，目前的解法是靠 props 傳遞 component 來達到類似 slot 的功能：

幫你寫了個：

jsFiddle