今天在使用微信小程序 component 里的 slot 時(shí)發(fā)現(xiàn)，當(dāng)只用一個(gè) slot 并且將 slot 命名后，頁(yè)面中調(diào)用這個(gè) slot 并不會(huì)加載進(jìn)來(lái)。
研究嘗試后發(fā)現(xiàn)，如果想要使用命名的方式調(diào)用單個(gè) slot ，也需要像調(diào)用多個(gè) slot 的方式 在 component/xxx.js 里開(kāi)啟多個(gè) slot 的功能。下面看代碼。
// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot></view>// index 頁(yè)面<d-slot> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時(shí)界面上不會(huì)載入 slot
而當(dāng)我把 slot 的name 刪去時(shí)，slot 就能成功載入
// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot></slot></view>// index 頁(yè)面<d-slot> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view>這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時(shí)界面上載入 slot
或者不刪去 name 而是在組件js中聲明啟用
// component.jsComponent({ options: { multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ }})// component<view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot></view>// index 頁(yè)面<d-slot> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view></d-slot>//結(jié)果，此時(shí)界面上載入 slot以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
