⼩程序slot踩坑的解决
今天在使⽤⼩程序 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
如何启用javascript功能
或者不删去 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
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。