微信小程序中slot插槽基本使用方法實例
前言
小程序中, 如果插槽有必要拿到父組件的數(shù)據(jù)來展示, 直接父傳子即可, 和Vue一樣的思路
一、基本插槽
參考Vue的基本插槽, 兩者的使用思路相同.
子組件開一個<slot>
標(biāo)簽表示插槽, 父組件直接在子組件標(biāo)簽之間寫入要插入的內(nèi)容, 這些內(nèi)容就會自動插入到子組件的第一個基本插槽中, 注意是第一個, 就下面這個例子就可以看出:
<!-- 子組件.wxml --> <view class="box"> <slot></slot> <!-- 基本插槽1 --> <view wx:for="{{list}}" wx:key="item" >{{item}}</view> <slot></slot> <!-- 基本插槽2 --> </view>
雖然這里使用了多個插槽, 但是子組件js里加不加這段無所謂, 因為最終是只有一個插槽, 但是多個具名插槽就要加了, 不然所有具名失效:
//子組件.js Component({ options: { multipleSlots: true // 復(fù)數(shù)插槽: 是 } })
json里規(guī)定該目錄下作為組件使用而非頁面:
//子組件.json { "component": true, //作為組件: 是 "usingComponents": {} }
不加也不會報錯, 但所有插槽都是無效的.
之后在父組件里引入子組件:
//父組件.json { "usingComponents": { "navbar": "../../components/NavBar/NavBar" } }
<!-- 父組件.wxml --> <navbar model:list="{{datalist}}"> <view> <text>slot啊</text> </view> </navbar>
這個Navbar使用了彈性布局, 如果兩個插槽均能成功插入, 那么navbar左右應(yīng)當(dāng)各有一個"slot啊".
自上而下解析, 只有第一個插槽插入內(nèi)容:
這點和Vue不同, 在Vue中出現(xiàn)多個基本插槽時, 父組件傳入的內(nèi)容會整體、完好的插入每一個插槽, 我在《Vue3 插槽使用詳解》中做過詳細(xì)演示.
個人感覺這樣不是很好.
二、具名插槽
和Vue的具名插槽很像(怎么又像…), 至少使用上很像.
使用name
屬性在子組件里給插槽起名, 父組件進(jìn)行內(nèi)容插入時使用slot
屬性指定這部分內(nèi)容要插入哪個插槽:
<!-- 子組件wxml --> <view class="box"> <slot name="before"></slot> <view wx:for="{{list}}" wx:key="item">{{item}}</view> <slot name="after"></slot> </view>
1個以上具名插槽就一定要加這個了:
//子組件.js Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多 slot 支持 } })
然后到父組件引入試一下:
<navbar model:list="{{datalist}}"> <view slot="before"> <text>slot:before</text> </view> <view slot="after"> <text>slot:after</text> </view> </navbar>
看下效果, 一個在Navbar主體前, 一個在navbar主體后:
emmm…
突然有個疑問, 要是把兩個兄弟元素都規(guī)定插入同一個插槽, 會出現(xiàn)什么情況? 會按序插入, 還是我想的那樣直接覆蓋呢…
父組件分兩次傳給before插槽試一下:
<!-- 父組件.wxml --> <navbar model:list="{{datalist}}"> <view slot="before"> <text>slot:before |</text> </view> <view slot="before"> <text>slot:after</text> </view> </navbar>
可見并不會覆蓋, 而是按照傳入的先后順序依次排列, 相當(dāng)于一次性傳入.
三、樣式
組件現(xiàn)在可以設(shè)置自己內(nèi)部的默認(rèn)樣式了, 按照Vue的思想, 即便向組件插槽內(nèi)傳入內(nèi)容, 組件的樣式也不會影響到插槽內(nèi)容的樣式, 但是現(xiàn)在這種隔離變得更加可控.
:host
通過wxss選擇器:host實現(xiàn)規(guī)定當(dāng)前子組件內(nèi)的默認(rèn)樣式, 并且可以影響到傳入子組件插槽的內(nèi)容:
舉例:
/* 子組件.wxss */ .active { /* 活躍的navbarItem字體為亮綠色 */ color: lightgreen; } /* 組件內(nèi)所有文字默認(rèn)粉色 */ :host { color: pink; }
然后我們還是用具名插槽傳那倆值, 看下效果, 此時"衣服"選項活躍:
styleIsolation可控化樣式隔離
允許直接開發(fā)者直接控制父子組件之間的樣式分享規(guī)則;
直接放在子組件json里使用, 就像這樣:
{ "component": true, "usingComponents": {}, "styleIsolation": "shared" }
屬性 | 說明 |
---|---|
“styleIsolation”: “isolated” | 啟用樣式隔離, 父子組件互不影響(默認(rèn)) |
“styleIsolation”: “apply-shared” | 父組件樣式將影響子組件, 但子組件不影響父組件 |
“styleIsolation”: “shared” | 分享, 互相影響 |
就拿"styleIsolation": "shared"
舉個例子, 我在父組件的WXSS中, 指定一個子組件元素的樣式:
{ "component": true, "usingComponents": {}, "styleIsolation": "shared" }
<!-- 子組件 --> <view class="box"> <slot name="before"></slot> <!-- 略 --> <slot name="after"></slot> </view>
externalClasses外部樣式類
將子組件內(nèi)部元素的類名暴露, 允許在父組件內(nèi)傳入子組件內(nèi)部元素類名.
比如子組件里有個長100px寬100px的div, 使用外部樣式類可以做到由父組件傳入一個類名, 實現(xiàn)父組件類名設(shè)置為子組件div的樣式.
//子組件 Component({ externalClasses: ['my-class'] })
<!-- 子組件 --> <view class="my-class">這段文本的顏色由組件外的 class 決定</view>
/* 父組件樣式 */ .red-text { color: red; }
<!-- 父組件 --> <my-component my-class="red-text" />
當(dāng)然也可以看到, 在子組件內(nèi)部這就是一個普通的類名, 那么是不是也可以在子組件wxss里使用它呢:
在既由外部傳入又有自身樣式的情況下, 樣式類的優(yōu)先級是未被定義的, 也就是說會出現(xiàn)覆蓋情況?那么是個別樣式的覆蓋還是對于整個樣式類的覆蓋呢, 我試了一下:
根據(jù)結(jié)果來看, 其實只要將一個子組件類名指定為externalClasses
, 它就不可再作為普通類名使用, 而且原因應(yīng)該也不是產(chǎn)生了樣式類覆蓋, 因為父組件不給子組件傳類名的情況下, 被指定為externalClasses
的類名也不可以作為普通類名使用, 它根本不生效:
<view class="my-class">子組件</view>
//子組件js, 將my-class指定為externalClasses. Component({ externalClasses: ['my-class'] })
/* 子組件樣式 */ .my-class { height: 100px; width: 100px; color: yellow; background-color: aqua; }
然后直接來看父組件不傳類名的情況:
<!-- 父組件中引入的子組件 --> <my-component />
可以明顯看到的是沒有顏色, 說明即便父組件不傳入類名, my-class也不再能作為普通類名使用了.
使用頁面/父組件的樣式
在配置了父子組件存在樣式隔離的情況下, 出現(xiàn)子組件需要使用父組件或頁面的樣式類的需求, 可以使用這個.
通過在類名添加步驟進(jìn)行一些額外操作來完成:
<!-- 使用引入頁面的類 --> <view class="~blue-text"> 這段文本是藍(lán)色的 </view>
<!-- 使用父組件的類 --> <view class="^red-text"> 這段文本是紅色的 </view>
總結(jié)
還好有用過Vue, 學(xué)起來比較清晰.
文檔最下面還有一個虛擬化組件節(jié)點, 這個本文沒有提到.
到此這篇關(guān)于微信小程序中slot插槽基本使用的文章就介紹到這了,更多相關(guān)微信小程序slot插槽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06javascript中encodeURI和decodeURI方法使用介紹
encodeURI和decodeURI是成對來使用的,因為瀏覽器的地址欄有中文字符的話,可以會出現(xiàn)不可預(yù)期的錯誤,所以可以encodeURI把非英文字符轉(zhuǎn)化為英文編碼,decodeURI可以用來把字符還原回來2013-05-05js 判斷當(dāng)前時間是否處于某個一個時間段內(nèi)
這篇文章主要介紹了js 判斷當(dāng)前時間是否處于某個一個時間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫的 isDuringDate 函數(shù)來實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07javascript中的有名函數(shù)和無名函數(shù)
javascript中的有名函數(shù)和無名函數(shù)...2007-10-10