今天在使用微信小程序 component 里的 slot 时发现，当只用一个 slot 并且将 slot 命名后，页面中调用这个 slot 并不会加载进来。研究尝试后发现，如果想要使用命名的方式调用单个 slot，也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。
// component
<view class=’slot’>
<view> 哈哈哈哈哈哈哈哈 </view>
<slot name=”after”></slot>
</view>
// index 页面
<d-slot>
<!– 这部分内容将被放置在组件 <slot name=”after”> 的位置上 –>
<view slot=”after”> 这里是插入到组件 slot name=”after” 中的内容 </view>
</d-slot>
// 结果，此时界面上不会载入 slot
而当我把 slot 的 name 删去时，slot 就能成功载入
// component
<view class=’slot’>
<view> 哈哈哈哈哈哈哈哈 </view>
<slot></slot>
</view>
// index 页面
<d-slot>
<!– 这部分内容将被放置在组件 <slot name=”after”> 的位置上 –>
<view> 这里是插入到组件 slot name=”after” 中的内容 </view>
</d-slot>
// 结果，此时界面上载入 slot
或者不删去 name 而是在组件 js 中声明启用
// component.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
properties: {/* … */},
methods: {/* … */}
})
// component
<view class=’slot’>
<view> 哈哈哈哈哈哈哈哈 </view>
<slot name=”after”></slot>
</view>
// index 页面
<d-slot>
<!– 这部分内容将被放置在组件 <slot name=”after”> 的位置上 –>
<view slot=”after”> 这里是插入到组件 slot name=”after” 中的内容 </view>
</d-slot>
// 结果，此时界面上载入 slot