vue3插槽

插槽

将元素作为承载分发内容的出口

<todo-button>
 Add todo
</todo-button>

// to-do 组件模板
<button>
<slot></slot>
</button>

插槽可以包含任何的模板代码

• HTML
• 组件

如果template中没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

渲染作用域

• 插槽中使用数据，可以访问与模板其余部分相同的实例property(即相同的作用域)
• 插槽不能访问子组件的作用域

父级模板里所有内容都是在父级作用域中编译的；子模版里的所有内容都是在子作用域中编译的

后备内容

为插槽设置具体的后备（默认的数据）,将默认内容放入slot中

具名插槽

// 子组件
// 不带name的出口带哦与隐含的名字default
<slot name="content"></slot>
// 父组件
// v-slot只能添加<template>上（例外）
<template v-slot="content"></template>

作用域插槽

让插槽内容能够访问子组件中的才有的数据

只有子组件可以访问item数据，子组件内的插槽是不可以直接进行访问的

// 要使item可用于提供内容的slot内容，可以添加一个<slot>元素并将其绑定为属性
<ul>
    <li v-for="(item,index) in items">
        <slot :item="item"></slot>
    </li>
</ul>

绑定在<slot>元素上的attribute被称为插槽prop。现在在父级作用域中，问哦们可以使用带值的v-slot来定义我们的提供的插槽prop的名字,只要出现多个插槽，请始终为所有的插槽使用完整的基于<template>的语法

<todo-list>
    <template v-slot:default="slotProps"> // 名字可任意更换，不带参数的v-slot被假定对应默认插槽
        <i class="fas fa-check"></i>
        <span class="green"0">{{slotProps.item}}</span>
    </template>
</todo-list>

解构插槽内容

• 重命名
• 后备内容

动态具名插槽

<base-layout>
    <template v-slot:[dynamicSlotName]>
    </template>
</base-layout>

具名插槽的缩写

v-slot:header => #header,缩写时需要有参数