vue的插槽你了解多少

插槽
允许我们在调用子组件时为子组件传递模板

当组件渲染的时候，插槽会被替换为我们的自定义文本
插入自定义内容

 template:`
            <div><h2>标题：{{title}}-{{typeofTitle}}</h2></div>
            <slot></slot>
            <div>自定义组件,计数器：{{count}}</div>
            <div>
        `,

插槽内可以包含任意的模板代码，甚至是其他组件
理解
类比为函数
就类似于形式参数，标签中的内容类似于实际参数
默认值
内部的元素就是默认值，当我们标签中间没有内容时，就展示默认值

分类
·匿名插槽

<slot></slot>

具名插槽
介绍：
在一个组件中有多个插槽，调用时为了给不同的插槽传参，就需要给插槽命名
定义方式：

 <slot name="header"></slot>
            <slot name="footer"></slot>

使用方式：

 <briup-info title="world" :visable="flag">
                <template v-slot:header>
                     头部的插槽
                </template>
                <template v-slot:footer>
                    <p>底部的插槽</p>
                </template>

            </briup-info>

·作用域插槽
介绍
子组件

  <slot v-bind:user="user">{{user.name}}</slot>

父组件

<template v-slot:default="slotProps">
                {{slotProps.user.name}}</template>

父组件就可以通过slotProps访问到绑定到插槽上的所有属性