欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序中slot插槽基本使用方法實例

 更新時間:2022年11月28日 15:08:59   作者:白瑕  
之前竟然聽到有人跟我說微信小程序沒有組件插槽功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序中slot插槽基本使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

小程序中, 如果插槽有必要拿到父組件的數(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)化編譯后的體積

    這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • javascript回到頂部特效

    javascript回到頂部特效

    這篇文章主要為大家詳細(xì)介紹了javascript回到頂部特效,具有一定的參考價值,感興趣的朋友可以參考一下
    2016-07-07
  • javascript中encodeURI和decodeURI方法使用介紹

    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)

    這篇文章主要介紹了js 判斷當(dāng)前時間是否處于某個一個時間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫的 isDuringDate 函數(shù)來實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法

    js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法

    這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • javascript實現(xiàn)貪吃蛇小練習(xí)

    javascript實現(xiàn)貪吃蛇小練習(xí)

    這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)貪吃蛇的小練習(xí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • javascript中的有名函數(shù)和無名函數(shù)

    javascript中的有名函數(shù)和無名函數(shù)

    javascript中的有名函數(shù)和無名函數(shù)...
    2007-10-10
  • FF下zoom的替代方案 單位em

    FF下zoom的替代方案 單位em

    css 屬性zoom是ie私有屬性 在FF中(或者說僅實現(xiàn)CSS標(biāo)準(zhǔn)的其他瀏覽器中)無法使用,一直在網(wǎng)上搜索它的替代方案,但沒有收獲,后來聽群里有朋友說em或可解決此問題,經(jīng)過研究和測試,發(fā)現(xiàn)果然可以解決。
    2008-08-08
  • js實現(xiàn)購物車商品數(shù)量加減

    js實現(xiàn)購物車商品數(shù)量加減

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)購物車商品數(shù)量加減,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • js 屏蔽鼠標(biāo)右鍵腳本附破解方法

    js 屏蔽鼠標(biāo)右鍵腳本附破解方法

    用來屏蔽鼠標(biāo)右鍵的代碼,破解方法也比較簡單。比較根本。禁掉js什么也運行不了。
    2009-12-12

最新評論