微信小程式——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
或者不刪去 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