VUE---插槽
一、插槽的作用&场景
1、在封装组件的时候，将可变的结构设计为插槽（<slot></slot>）
2、使用上述组件的时候，可以按需为插槽提供自定义的结构，以达到复用组件且高度自定的效果
二、基本语法
1、组件内需要自定义的结构部分，改为<slot></slot>占位
2、使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot
注：<slot>默认内容</slot>，若MyDialog中不传内容，则会显示slot的默认内容
示例如下：
// MyDialog -- 子组件
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖ </span></div><div class="dialog-content"><!-- 内容区，内容不固定，用slot占位 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>// 父组件内容如下
<MyDialog><!-- 为插槽提供所需要展示的结构 -->你确认要进行删除操作么？
</MyDialog>结果如下：
三、具名插槽
一个组件内有多处结构，需要传入外部标签进行定制时，需要使用具名插槽。
语法：
1、给slot添加name属性，以区分结构
2、父组件中用<template></template>包裹语句块，配合v-slot:名字，来对应结构位置
注：
v-slot 可以简写为 #；
父组件中一定要用<template></template>；
默认的slot插槽的名字为default；
示例如下：
<!-- 子组件内容如下 -->
<div class="dialog-header"><slot name="head"></slot>
</div>
<div class="dialog-content"><slot name="content"></slot>
</div>
<div class="dialog-footer"><slot name="footer"></slot>
</div>
<!-- 父组件内容如下v-slot == #-->
<MyDialog><template #head>大标题</template><template #content>内容文本</template><template v-slot:footer><button>按钮</button></template>
</MyDialog>结果如下：
四、作用域插槽
有时候，子组件在定义插槽的时候，需要向父组件传递一些数据，这样的插槽叫做作用域插槽。
使用步骤：
（1）给子组件的slot标签，以添加属性的方式传值
（2）所有的属性都会被收集到一个对象中
（3）父组件的template中，利用#插槽名="obj" 接收
注：
传递的属性不能叫name，name是插槽的名字；
作用域插槽只能在当前的template中使用；
示例如下：
<!-- 子组件 -->
<slot uname="Tom" age="18"></slot><!-- 父组件 -->
<template #default="obj"><p>显示内容{{obj}}</p>
</template>
<!-- 父组件接收数据时，可以直接解构使用，#default="{ uname, age }"； -->
<template #default="{ uname, age }"><p>{{uname}} {{age}}</p>
</template>结果如下：
