今天在使用微信小程序 component 里的 slot 時發(fā)現(xiàn)，當(dāng)只用一個 slot 并且將 slot 命名后，頁面中調(diào)用這個 slot 并不會加載進(jìn)來。

研究嘗試后發(fā)現(xiàn)，如果想要使用命名的方式調(diào)用單個 slot ，也需要像調(diào)用多個 slot 的方式 在 component/xxx.js 里開啟多個 slot 的功能。下面看代碼。

// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot></view>// index 頁面<d-slot>  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->  <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時界面上不會載入 slot

而當(dāng)我把 slot 的name 刪去時，slot 就能成功載入

// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot></slot></view>// index 頁面<d-slot>  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->  <view>這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時界面上載入 slot

或者不刪去 name 而是在組件js中聲明啟用

// component.jsComponent({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ }})// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot></view>// index 頁面<d-slot>  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->  <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時界面上載入 slot

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。