一、插槽的定义
vue实现了一套内容分发的Api，将<slot>元素作为承载内容分发
二、插槽的注意事项
父组件模板的内容只能访问父组件的作用域，子组件的模板只能访问子组件的作用域。
也就是说插槽的内容可以访问父组件的数据作用域，因为插槽内容本身就是在父组件的模板中定义的，插槽内容是无法访问子组件中的数据，vue模板中的表达式只能访问其定义时在所处的作用域，这个和js的词法作用域规则是一样的。
三、普通插槽
// 父组件
import chacao from "./chacao.vue"
components:{ chacao }
<chacao>
hahaja
<span>fffff</span>
</chacao>
// 子组件
<div>
<slot></slot> // 所有内容将会显示到这
</div>四、后备内容
有时为一个插槽设置具体的后备(也就是默认)内容是很有用的，它只会在没有被提供内容的时候被我渲染
// 父组件:提供了内容，子组件显示save
<submit-button>
save
</submit-button>
// 父组件: 无内容，子组件显示submit
<submit-button>
</submit-button>
// 子组件
<button type="submit">
<slot>submit</slot>
</button>五、具名插槽
父组件的三种写法
import chacao from "./chacao"
components:{chacao}
// 第一种使用: v-slot + template
<chacao>
<template v-slot:one>
one
</template>
<template v-slot:two>
two
</template>
<div> three </div>
</chacao>
// 第二种使用: # + template, v-slot: 等同于#，是一种简写方式
<chacao>
<template #one>
one
</template>
<template #two>
two
</template>
<div> three </div>
</chacao>
// 第三种使用: slot(没有v-) +具体标签(不能是template)
<chacao>
<div slot="one">
one
</div>
<div slot="two">
two
</div>
<div> three </div>
</chacao>子组件
<template>
<div>
<slot name="one"></slot> // one
<slot name="two"></slot> // two
<slot></slot> // three
</div>
</template>六、作用域插槽
某些场景下，插槽的内容想要同时使用父组件和子组件内的数据，要做到这一点，我们需要来让子组件在渲染的时候将一部分的数据提供给插槽
(1)只有默认插槽
// 父组件,只有默认插槽，也可以在组件标签上使用解构赋值v-slot="{text,wyz}"
<chacao v-slot="slotProps">
<div>{
{slotProps.text}}-{
{slotProps.wyz}}</div>
</chacao>
// 子组件
<slot text="a" wyz="wyz"></slot>(2)只有具名插槽
// 父组件
<chacao>
// 普通使用
<template #one="proplot">
{
{proplot.text}}
</template>
// 解构赋值
<template #two="{wyz}">
{
{wyz}}
</template>
</chacao>
// 子组件
<slot name="one" text="wyz"></slot>
<slot name="two" wyz="wyz"></slot>(3)同时具有默认和具名插槽
// 父组件
<chacao>
<template #one="{text}">
{
{text}}
</template>
<template #two="{wyz}">
{
{wyz}}
</template>
<template #default="{defaultName}">
{
{defaultName}}
</template>
</chacao>
// 子组件
<slot name="one" text="wyz"></slot>
<slot name="two" wyz="wyz"></slot>
<slot defaultName="66-88"></slot>
