微信小程序 slot踩坑的解決
今天在使用微信小程序 component 里的 slot 時發(fā)現(xiàn),當(dāng)只用一個 slot 并且將 slot 命名后,頁面中調(diào)用這個 slot 并不會加載進來。
研究嘗試后發(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.js Component({ 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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強大的數(shù)據(jù)結(jié)構(gòu),我們常常通過將字符串轉(zhuǎn)換為數(shù)組來解決許多算法。本文為大家總結(jié)了6個JS字符串轉(zhuǎn)數(shù)組的方法,希望對你有所幫助2022-09-09原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點詳解
JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一,那么這篇文章主要給大家介紹了關(guān)于原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點的相關(guān)資料,需要的朋友可以參考下2021-07-07