具名插槽就是給这个插槽起个名字以便能复用
<div id='app'>
这里是父组件
<child :message='message'>
<template v-slot:header>
这里是头
</template>
<template>
这里是中间部分
</template>
<template v-slot:bottom>
这里是尾巴
</template>
</child>
</div>
<script>
Vue.component('child',{
props:['message'],
template:'<div><slot></slot><slot name="header"></slot><slot name="bottom"></slot></div>'
})
new Vue({
el:'#app',
data:{
message:'这里是子组件'
},
})
</script>运行结果如下：
上方代码，运行结果是按照模版中的样式显示的，<slot></slot>是没有名字的普通的插槽，所以显示的是中间部分，因为中间部分的template我没有給名字
再看下方代码：
<div id='app'>
这里是父组件
<child :message='message'>
<template v-slot:header>
这里是头
</template>
<template>
这里是中间部分
</template>
<template v-slot:bottom>
这里是尾巴
</template>
<template>
这里也是中间部分
</template>
<template v-slot:bottom>
这里是另一个尾巴
</template>
</child>
</div>
<script>
Vue.component('child',{
props:['message'],
template:'<div><slot></slot><slot name="header"></slot><slot name="bottom"></slot></div>'
})
new Vue({
el:'#app',
data:{
message:'这里是子组件'
},
})
</script>运行结果：
他把没有名字的两部分连同v-slot：bottom识别为普通插槽所以‘这是尾巴’没有显示，最后一个v-slot:bottom为名字为bottom的插槽
