vue插槽slot的原理与用法详解（二）

在上一篇文章中简单的介绍了slot 的基础用法，接下来介绍关于具名插槽的用法。

具名插槽，顾名思义其实就是将插槽起一个名字name，然后在父模板中根据name显示相应的内容。

使用方式如下，在slot上根据name属性给插槽命名

//子组件popup的内容
1  <div class="p-content">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
</div>

//父组件中引用popup组件
<popup v-bind:title="'新增'">
        <template #header>
            <div>header部分</div>
        </template>
        <template>
            <div>hello</div>
        </template>
        <template v-slot:footer>
        <div>
            footer部分
        </div>
    </template>
</popup>

在向具名插槽中提供内容的时候，可以在父模板的<template> 元素上使用 v-slot 指令，并以 v-slot:插槽名的方式，将template中的内容传输到相应的插槽中，任何没有被包裹在带有v-slot的<template> 中的内容都会被视为默认插槽的内容。

具名插槽的缩写v-slot:插槽名可以使用#插槽名替代，如v-slot:header的使用效果和#header使用效果相同。