小程序的插槽用法和 Vue 的 slot 几乎一模一样，现在组件内需要的地方加入插槽（<slot>）节点就行了。也可以直接查看小程序提供的 🔗 代码片段
<!-- 组件模板 P.S. 设置语言类型为html是因为wxml没有高亮 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view><!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>是不是很简单，需要使用到具名插槽的话，只需要在组件的 options 中开启 多slot支持 multipleSlots 就可以了。
// 组件js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>然后就和在 Vue 中使用具名插槽一样了：
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>启用 多slot支持 之后，匿名插槽还是可以继续使用的。
🤗 尾声
抽象节点
在微信开放文档中提到了一个名词 抽象节点，查看具体的文档之后可以将其理解为 Vue 中的 动态组件，具体可以对比两个文档中关于这两个名词的解释以及示例：