关于vue插槽的一个小例子

[简简遇单单]

child组件模板

<template>
<ul>
<li v-for="item in testData" :key="item.id">
<slot name="testSlot" v-bind:data="item">
{{item.text}}
</slot>
</li>
</ul>
<slot></slot>
</div>
</template>
data ==》
testData: [
{
id: 1,
text: "first"
},
{
id: 2,
text: "second"
}
]

父组件调用

<template>
<child>
<template slot="testSlot" scope="{data}">
<span v-if="data.id==1">√</span>
{{data.text}}
</template>
</child>
</template>