本文已参与[新人创作礼]活动，一起开启掘金创作之路
1.组件-插槽
应用场景
组件里数据不确定可以怎么做？
组件里标签不确定怎么办？
操作
(1) 组件内用<slot></slot>占位
(2) import引入组件并components注册组件Pannel
(3) 使用组件时<Pannel></Pannel>包裹的内容，传入标签替代slot（Pannel为任意）
小结
(1) 当组件内某一部分标签不确定时怎么办？
用插槽解决
(2) 插槽具体如何使用？
* 先在组件内用slot占位
* 使用组件时，传入具体标签插入
(3) 插槽运行结果？
传入的标签会替换掉slot显示
2.组件-插槽-默认内容
应用场景
使用封装组件的人，不给slot传标签，怎么办？
操作
<slot> 默认内容 </slot>
* 不给组件传标签，slot显示默认内容
* 给组件内传标签，slot默认内容被换掉
小结
(1) 如何给插槽设置默认显示内容？
slot标签内写好默认要显示内容
(2) 什么时候插槽默认内容会显示？
当使用组件并未给我们传入具体标签或内容时
3.组件-具名插槽
(1) 应用场景
组件内有2处以上不确定标签怎么办？
(2) 操作
slot使用name属性区分名字
template配合v-slot:名字来区分对应标签( v-slot：可以简化成# )
组件中
<div>
<div class="n">
<slot name="name">
<h1>~(￣▽￣)~</h1>
</slot>
</div>
<div class="n">
<slot name="content">
</slot>
</div>
</div>
使用者
<Pannel>
<template v-slot:name>
<h1>(￣▽￣)"</h1>
</template>
<template #content>
<h1>(o゜▽゜)o☆</h1>
</template>
<Pannel>
(3) 小结
具名插槽的使用步骤是什么？
组件内：slot占位，设置name属性用于区分
使用者：template配合v-slot：name指定替换slot
v-slot:可以简化成什么？
#
4.组件-作用域插槽
(1) 应用场景
使用插槽时，想使用组件内的变量
(2) 操作
匿名插槽
组件内
<slot v-bind="user"></slot>
//仅匿名可简写且使用者接受数据必须解构
<slot :n="user"></slot>
... ...
data(){
return {
user:{
n:1
}
}
}
使用者
<Pannel v-slot="user">
{{user.n}}
</Pannel>
//可解构为 匿名具名均可使用
<Pannel v-slot= "{ n }">
{{n}}
</Pannel>
具名插槽
组件内
<slot name="m" v-bind="user"></slot> //name为具名插槽名
使用者
```js
<Pannel>
<template v-slot:m="user">
{{user.n}}
</template>
// <template v-slot:m="{user：users}">//可将user变量改名为users
// <template #m="{user={n：0}}"> 可用于给user设置默认值防止user无值报错
</Pannel>
```
(3) 小结
作用域插槽什么时候使用？
使用组件插槽技术时，需要用到子组件内变量
