1、具名插槽
有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。
//组件调用时
<MyFooter v-red :age.sync="age">
<template v-slot:footer>
//这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
<div>list</div>
</template>
</MyFooter>
//书写组件时
<template>
<div>
{{age}}
<div>
<slot name='footer' />
//这里name的值就是这个插槽的名称。
</div>
</div>
</template>
最后我们会在我们想要的位置将我们的元素放置。
2、作用域插槽
作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。
//组件调用
<ul>
<myli :title="val.title"
>
<template v-slot:footer="message">
<div>{{message.aa}}</div>
</template>
</myli>
</ul>
//书写组件时
<template>
<li>
<slot name='footer' :aa="title">
</slot>
</li>
</template>
注意事项：
这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。
3、总结
v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。
<!-- slot.vue-->
<!-- 通过name属性指定具名插槽，没有name属性的为默认插槽-->
<slot name="header">我是header</slot>
<slot name="main">我是main</slot>
<slot :title="title" name="footer"></slot>
<slot></slot>
// index.vue
<!-- 通过v-slot:footer="title"来拿到slot页面传过来的数据，v-slot:xxx来指定对应slot.vue中的插槽-->
<slot-name>
<template v-slot:header>我是新的header</template>
<template v-slot:main>哈哈哈哈</template>
<template v-slot:default>我是默认的</template>
<template v-slot:footer="title">{{ title.title.age }}</template>
</slot-name>
<!-- v-slot的简写形式-->
<!-- 通过#号加上slot.vue中的对应插槽中的name属性的值-->
<slot-name>
<template #header>我是新的header</template>
<template #footer="title">{{ title.title.age }}</template>
</slot-name>