插槽

@Slots

定义的组件除了传递属性 Props 和传递事件 Emits，还可以传递内容 content - 在基本功能的基础上，通过插槽 slot 插入内容，从而实现拓展功能 - more flexible and reusable

可以是任何有效的内容；静态数据，响应式数据，甚至其它组件； - can be any valid template content

可以指定插槽默认内容 - 默认插槽

可以声明多个插槽

为了区分，多个插槽应该指定 name 属性 - 具名插槽

更多信息，请访问 Slots

Procedure

1. 子组件创建过程中，预留一个位置 slot，将其作为一个占位符，父组件传递进来的内容就会渲染在这里

仅预留位置

<template>
    <div>
        //内容
        <slot />
    </div>
</template>

默认插槽 Default Slot - 只有一个插槽的情况；可以指定默认内容，避免插槽没有内容导致告警

<template>
    <div>
        //内容
        <slot>插槽默认内容</slot>
    </div>
</template>

具名插槽 Named Slots - 多个插槽；使用属性 name 区分；没有指定 name 的，使用默认名字 default；同样可以指定默认内容

<template>
    <div>
        //内容
        <slot></slot>
        <slot name = 'header'></slot>
        <slot name = 'footer'></slot>
    </div>
</template>

条件插槽 Conditional Slots - 利用插槽的 $slots 属性判断；多用于具名插槽；只有当父组件提供了相应的插槽内容时，才会渲染对应的 DOM 结构；非条件插槽则必须使用

<template>
    <div>
        //内容
        <slot></slot>
        <slot name = 'header'></slot>
        <div v-if="$slots.footer">
            <slot name = 'footer'></slot>
        </div>
    </div>
</template>

2. 父组件

使用内容填充插槽；可以是普通文本，也可以是HTML节点

<template>
    <AlertBox> Something bad happened. </AlertBox>
</template>

使用默认插槽

<template>
    <AlertBox> </AlertBox>
</template>

使用具名插槽 - 使用 <template> 并指定对应的 v-slot 标识；可以简写为 #

<template>
    <AlertBox>  
        <template v-slot:header>
            <h1>Here might be a page title</h1>
        </template>
        <template #footer>
            <h1>Here might be a page title</h1>
        </template>
    </AlertBox>
</template>

使用条件插槽 - 不指定 footer

<template>
    <AlertBox>  
        <template v-slot:header>
            <h1>Here might be a page title</h1>
        </template>
    </AlertBox>
</template>

Slot content has access to the data scope of the parent component

Slot content does not have access to the child component's data

Style

组件样式

[] 封装版权组件，根据作者头像展示相应的版权信息；如果不指定头像，则使用大树哥的头像哦

提示：注意图片的使用

[] 封装卡片组件，用户可以使用顶部标题和底部说明

[] 封装代码组件，以便区分是结构、逻辑还是样式