Vue插槽（slot）的类型与使用

　　Vueslot是组件内容分发的出口，其设计规范源于：WebComponents规范草案。一般的，基于Slot使用场景我们可以将其分为三大类，其中各个类型之间又存在着依次聚合的关系。
　　默认插槽
　　常见适用于静态、或者无强联系、分类布局的组件中。如网站底部的footer组件，我们会有些基础的元素，如copyright、开发公司、地址等，但还存在一些不确定是否公用的东西，如时间、统计等，这时，我们就可以通过slot开发一个分发的出口，让具体场景使用的开发人员自己决定是否使用扩展分发已经如何扩展的问题。默认插槽的使用方式如下：子组件Aritcile。vuetemplatep这时子组件的标题slot！这是子组件的段落slottemplate父组件detail。vuetemplatep父组件的标题p这里是需要分发的子组件的段落内容articletemplate
　　如此显示内容为：父组件的标题这时子组件的标题这里是需要分发的子组件的段落内容具名插槽
　　默认插槽在常见的常见基本使用，但存在需要多组件的多个部分进行自定义分发时，默认插槽的方式就不太适用了。因为无法指定位置不确定需要将内容插入到那个slot下。这时，我们就需要通过给slot一个名字来实现指定位置的插入。常见的场景如页面布局，我们需要将一个页面分为三个部分：头部、底部、内容展示区域，这时我们就需要给对应的slot进行命名。使用如下：！子组件page。vuetemplateslotnameheaderslotslotslotslotnamefooterslottemplate！父组件dashborad。vuetemplate当前页面的显示内容page底部内容頭部内容打印正文内容pagetemplate
　　显示内容如下：当前页面的显示内容頭部内容打印正文内容底部内容作用域插槽
　　基于上述两种插槽的基础上，当我们需要在分发内容中获取到分发的参数内容，如对于一个列表而言，每个item在我们每次调用的时候都有可能不同，我们希望在列表组件中处理些通用逻辑，但具体item的样式我们需要足够的可扩展性，这是，我们就需要通过分发slot出口及其item的数据来实现插槽的功能，这就是作用域插槽。下面，通过一个列表的示例来了解。！子组件list。vuetemplate！列表显示内容templatevforitemindataSourceslotnamelistItemvbinditemtemplatepagination：totalpagination。total：pagepagination。current：limitpagination。pageSize：layoutpagination。layout：hideOnSinglePagepagination。hideOnSinglePagepaginationChangehandlePaginationChangeelbuttonvifbtnNametypeprimaryclassbtn：loadingbtnLoadingclick。nativebtnClick｛｛btnName｝｝elbutton！未读imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。combkdr9cf614cad2aca6e8。jpgclassemptyimagealtlogospan暂无相关数据spantemplate！父组件调用templatelisttemplatevslot：listItemrecordspanclasstimeitemlabel｛｛record。time｝｝span｛｛record。title｝｝spanclassdateitemlabel｛｛record。date｝｝span｛｛record。domainType｝｝spanclassdomainname｛｛record。domainName｝｝span审核意见：｛｛record。approvalOpinion｝｝templatelisttemplate
　　如上，通过在组件list中绑定数据，然后在父组件中使用来获取数据。