vue插槽新语法

今天聊聊vue的插槽

插槽的作用是什么：用以分发内容，<slot>作为承载分发内容的出口。
例：

文件--index.vue
<slot-demo>
    此处为需要传入slot-demo组件的内容，可以包含任意内容。比如另一个组件，比如纯文本，比如其他dom结构
</slot-demo>

文件--slot-demo.vue
<template>
    <slot name="foo">
        这里可以添加后备内容，也可以不需要。
    </slot>
</template>

因为旧语法在vue3.0中将不被支持，因此我们尽量使用新语法：

文件--index.vue
<slot-demo>
    <template v-slot:header>
        插槽内容
    </template>
    <!-- 使用slot-demo中的user对象渲染内容，下面是传递方式 -->
    <template v-slot:user-part="slotProps">
        {{slotProps.user.birth}}
    </template>
<slot-demo>

文件--slot-demo.vue
<div>
    <slot name="header"></slot>
    <slot name="user-part" :user-obj="user">
        {{user.name}}
    </slot>
</div>