htmledit_views">
1.常规
slot是让一个组件预留插槽，用于扩展性设计。例如一个Window组件这么设计
html"><div class="window"><slot></slot></div>那么使用者
html"><Window><span>xx</span></Window>就等同于
html"><div class="window"><span>xx</span></div>2.slot是有名字的
一个组件可以在不同的位置预留不同的插槽，那么使用的时候怎么区分插槽，这里就需要在设计和使用的时候都指明插槽的名字
例如一个Window组件这么设计：
html"><div class="window"><div class="herder"><slot name="header"></slot></div><div class="body"><slot></slot></div><div class="footer"><slot name="footer"></slot></div>
</div>那么使用者
html"><Window>
<template #header>
<span>我在header</span>
</template>
<template #footer>
<span>我在footer</span>
</template>
<span>我在body</span>
</Window>等同于
html"><div class="window"><div class="herder"><span>我在header</span></div><div class="body"><span>我在footer</span></div><div class="footer"><span>我在footer</span></div>
</div>像前面的常规例子里面，没有名字的情况，其实也有名字的，名字叫default，也可以采用跟具名slot的写法一样使用,default的slot无需使用template包裹起来
3.slot可以把组件的参数传递给子组件
例如一个Window组件这么设计：
html"><div class="window"><slot :data1="data1" :data2="data2"></slot></div>调用者：
html"><Window>
<template #default="{data1,data2}">
<span>xx{{data}},{{data2}}</span>
</template>
</Window>这样在子组件就能访问到父组件的data1，data2的数据
4.我们希望调用者在传递了template的内容时使用template的内容，没有的时候使用其他默认内容
例如,我们一个Window组件，默认都是底部一个提交和取消按钮，但也可以扩展让调用者随便换别的内容，可以这么写
html"><div class="window"><div class="footer"><slot name="footer"><button>提交</button><button>取消</button></slot></div>
</div>slot包裹起来的内容就是默认内容，如果有子组件有使用temple名字是footer，就会覆盖slot的内容，即看不到提交和取消按钮
5.slot如何跨多个子组件传递
例如A组件有多个solt，B组件对A组件进行了封装，必然需要支持调用B组件的时候，能把solt的特性也支持，这个时候B组件就需要传递其调用者的slot
B组件的一个解决方案
html" title=javascript>javascript">const slots = useSlots();//获取所有slotshtml">//在模板对应组件的位置遍历出来，v-slot等同#,指明slot的名字,也是遵顼slot的用法，套多一层
<templatev-for="(item, key, i) in slots":key="i"v-slot:[key]="{ model, formitem }"
><slot :name="key" :model="model" :formitem="formitem"></slot>
</template>
