微信小程序中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-06
這篇文章主要為大家詳細(xì)介紹了javascript回到頂部特效，具有一定的參考價值，感興趣的朋友可以參考一下2016-07-07
javascript中encodeURI和decodeURI方法使用介紹
encodeURI和decodeURI是成對來使用的，因為瀏覽器的地址欄有中文字符的話，可以會出現(xiàn)不可預(yù)期的錯誤，所以可以encodeURI把非英文字符轉(zhuǎn)化為英文編碼，decodeURI可以用來把字符還原回來2013-05-05
js 判斷當(dāng)前時間是否處于某個一個時間段內(nèi)
這篇文章主要介紹了js 判斷當(dāng)前時間是否處于某個一個時間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫的 isDuringDate 函數(shù)來實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)貪吃蛇的小練習(xí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
javascript中的有名函數(shù)和無名函數(shù)
javascript中的有名函數(shù)和無名函數(shù)...2007-10-10
css 屬性zoom是ie私有屬性 在FF中（或者說僅實現(xiàn)CSS標(biāo)準(zhǔn)的其他瀏覽器中）無法使用，一直在網(wǎng)上搜索它的替代方案，但沒有收獲，后來聽群里有朋友說em或可解決此問題，經(jīng)過研究和測試，發(fā)現(xiàn)果然可以解決。2008-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)購物車商品數(shù)量加減，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
用來屏蔽鼠標(biāo)右鍵的代碼，破解方法也比較簡單。比較根本。禁掉js什么也運行不了。2009-12-12