我遇到一个使用具名slot的问题，下面是我在子组件中定义的slot
<div class="v-tabs-item" v-for="item in source">
<slot name="slot-item-{{$index}}"></slot>
</div>它去遍历了一个数组，数组如下：
source: [
{
title: '选项卡一',
content: '选项卡一的内容'
},
{
title: '选项卡二',
content: '选项卡二的内容'
},
{
title: '选项卡三',
content: '选项卡三的内容'
}
]理论上组件中会生成如下代码：
<div class="v-tabs-item">
<slot name="slot-item-0"></slot>
</div>
<div class="v-tabs-item">
<slot name="slot-item-1"></slot>
</div>
<div class="v-tabs-item">
<slot name="slot-item-2"></slot>
</div>下面是我在html文档中定义的等待用来替换slot的内容：
<div slot="slot-item-{{$index}}" v-for="item in source">{{item.content}}</div>理论上它也会生成：
<div slot="slot-item-0">选项卡一的内容</div>
<div slot="slot-item-1">选项卡二的内容</div>
<div slot="slot-item-2">选项卡三的内容</div>这样的话刚好有一一对应的具名slot能够替换，可是，实际上，我却在最后的html中得到了这样的代码：
<div class="v-tabs-item">
<div slot="slot-item-0">选项卡一的内容</div>
<div slot="slot-item-1">选项卡二的内容</div>
<div slot="slot-item-2">选项卡三的内容</div>
</div>
<div class="v-tabs-item">
<div slot="slot-item-0">选项卡一的内容</div>
<div slot="slot-item-1">选项卡二的内容</div>
<div slot="slot-item-2">选项卡三的内容</div>
</div>
<div class="v-tabs-item">
<div slot="slot-item-0">选项卡一的内容</div>
<div slot="slot-item-1">选项卡二的内容</div>
<div slot="slot-item-2">选项卡三的内容</div>
</div>不是很明白，跪求指教，不胜感激！
// 子组件
<div class="v-tabs-item">
<slot name="slot-item-{{$index}}"></slot>
</div>
//父组件
<div class="v-tabs" v-for="item in source">
<div class="v-tabs-item">
<div slot="slot-item-{{$index}}">{{item.content}}</div>
</div>
</div>你试试看这样行不行？感觉你的子组件不需要那个v-for。
這確實是 Vue 的一個坑，尤大在這個 issue 裡面有解釋，目前的解法是靠 props 傳遞 component 來達到類似 slot 的功能：
幫你寫了個：
jsFiddle