在业务开发中，我们会遇到类似于如下场景：在有的页面中展示的标题如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/829ad573e3f24df796f715c942cdff24~tplv-k3u1fbpfcp-zoom-1.image) 而有的页面展示的标题如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3bcad9d1df5f46f8bc1c632ec30e13e4~tplv-k3u1fbpfcp-zoom-1.image) 而有的页面展示标题如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5e2ac742dd343d59736e37f638e3fca~tplv-k3u1fbpfcp-zoom-1.image) 我们会考虑将标题内容封装为一个通用的标题组件： - 左侧的标题通过属性传入 - 而右侧展示的内容是多形态的，有的展示为更多，有的不展示，有的可能还会展示别的内容，是可以自定义的 - 对于是否展示右侧内容，我们可以通过传入一个boolean类型的属性来决定是否展示 - 而对于这种可自定义的内容，我们可考虑**通过插槽来实现** 若对于大部分页面来说，右侧展示的内容为“更多 >”，那么我们期望达到类似于vue的“默认插槽”的效果： - 在不向插槽中传入内容时默认展示“更多 >” - 向插槽中传入内容时则展示传入的内容那么小程序中如何实现呢？ ## 一、小程序中的插槽特点小程序中是支持插槽功能的，对比vue来说，**小程序的插槽是不支持设置默认值的**： ### 1-1、vue中的默认插槽在vue中，若想为插槽设置默认值，只需在标签中写入想默认展示的内容即可： ``` 这里是默认展示的内容 ``` ### 1-2、小程序中的插槽而在小程序中，是不支持向中写入默认内容的，即使写入了内容，在页面上也不会展示出来： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b05a3e1d6f6044c8ba2b5a62fc028dbf~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8327d4e70f554852b5e0ead835e87fc0~tplv-k3u1fbpfcp-zoom-1.image) 尝试在封装的组件代码中写入插槽，并在插槽内写入想展示的默认内容，在使用后会发现，并没有像vue那样展示出来插槽中的默认内容： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dc6a30083994f95a7a76b79a26e0d9c~tplv-k3u1fbpfcp-zoom-1.image) 可见小程序中是不支持“默认插槽”功能的。那么我们如何结合小程序插槽来实现一个类似于vue“默认插槽”的功能呢？ ## 二、在小程序中实现“默认插槽”功能 ### 2-1、编写wxml组件代码 ``` ``` 对于上述场景的header组件wxml代码如上，但此时依旧不能实现“默认插槽”功能，此时若向插槽中传入内容，则传入的内容会与默认内容一同展示出来： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b901aff2eaf4a5fba2651f68b5bc030~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d4d47f8e5fe41cabfcc8bae7aef2245~tplv-k3u1fbpfcp-zoom-1.image) 可见插入的内容与“更多 >”都展示出来了，而我们想实现的是一旦插入了内容则默认内容不展示，没有插入内容则才展示默认内容的互斥效果。我们也可以通过传入一个Boolean属性来决定展示默认内容还是插入的内容，但这还得通过额外的属性去维护，有些麻烦，有没有更优雅的方式来实现呢？ ### 2-2、结合CSS来实现“默认插槽”效果由此想到了，CSS3的:empty选择器来判断是否插入了内容： ``` .header .slot:empty + .default { display: flex; } .header .default { display: none; align-items: center; font-size: 28rpx; color: #777; } ``` - 首先，默认内容区域不展示：display:none - 利用:empty选择器判断.slot中内容为空时，再让其兄弟节点.default展示即可由此，我们便在小程序中实现了类似于vue的“默认插槽”功能~