微信小程式——slot踩坑

摘要： 今天在使用微信小程式 component 裡的 slot 時發現，當只用一個 slot 並且將 slot 命名後，頁面中呼叫這個 slot 並不會載入進來。 研究嘗試後發現，如果想要使用命名的方式呼叫單個 slot ，也需要像呼叫多個 slot 的方式 在 component/x...

今天在使用微信小程式 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