前言

小程序中, 如果插槽有必要拿到父組件的數(shù)據(jù)來(lái)展示, 直接父?jìng)髯蛹纯? 和Vue一樣的思路

一、基本插槽

參考Vue的基本插槽, 兩者的使用思路相同.

子組件開(kāi)一個(gè)<slot>標(biāo)簽表示插槽, 父組件直接在子組件標(biāo)簽之間寫(xiě)入要插入的內(nèi)容, 這些內(nèi)容就會(huì)自動(dòng)插入到子組件的第一個(gè)基本插槽中, 注意是第一個(gè), 就下面這個(gè)例子就可以看出:

<!-- 子組件.wxml -->
<view class="box">
  <slot></slot>  <!-- 基本插槽1 -->
    <view wx:for="{{list}}" 
          wx:key="item" 
    >{{item}}</view>
  <slot></slot>  <!-- 基本插槽2 -->
</view>

雖然這里使用了多個(gè)插槽, 但是子組件js里加不加這段無(wú)所謂, 因?yàn)樽罱K是只有一個(gè)插槽, 但是多個(gè)具名插槽就要加了, 不然所有具名失效:

//子組件.js
Component({
  options: {
    multipleSlots: true // 復(fù)數(shù)插槽: 是
  }
})

json里規(guī)定該目錄下作為組件使用而非頁(yè)面:

//子組件.json
{
  "component": true,  //作為組件: 是
  "usingComponents": {}
}

不加也不會(huì)報(bào)錯(cuò), 但所有插槽都是無(wú)效的.

之后在父組件里引入子組件:

//父組件.json
{
  "usingComponents": { 
    "navbar": "../../components/NavBar/NavBar"
  }
}

<!-- 父組件.wxml -->
<navbar model:list="{{datalist}}">
  <view>
    <text>slot啊</text>
  </view>
</navbar>

這個(gè)Navbar使用了彈性布局, 如果兩個(gè)插槽均能成功插入, 那么navbar左右應(yīng)當(dāng)各有一個(gè)"slot啊".
自上而下解析, 只有第一個(gè)插槽插入內(nèi)容:

這點(diǎn)和Vue不同, 在Vue中出現(xiàn)多個(gè)基本插槽時(shí), 父組件傳入的內(nèi)容會(huì)整體、完好的插入每一個(gè)插槽, 我在《Vue3 插槽使用詳解》中做過(guò)詳細(xì)演示.

個(gè)人感覺(jué)這樣不是很好.

二、具名插槽

和Vue的具名插槽很像(怎么又像…), 至少使用上很像.

使用name屬性在子組件里給插槽起名, 父組件進(jìn)行內(nèi)容插入時(shí)使用slot屬性指定這部分內(nèi)容要插入哪個(gè)插槽:

<!-- 子組件wxml -->
<view class="box">
  <slot name="before"></slot>
  <view wx:for="{{list}}" wx:key="item">{{item}}</view>
  <slot name="after"></slot>
</view>

1個(gè)以上具名插槽就一定要加這個(gè)了:

//子組件.js
Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多 slot 支持
  }
})

然后到父組件引入試一下:

<navbar model:list="{{datalist}}">
  <view slot="before">
    <text>slot:before</text>
  </view>
  <view slot="after">
    <text>slot:after</text>
  </view>
</navbar>

看下效果, 一個(gè)在Navbar主體前, 一個(gè)在navbar主體后:

emmm…

突然有個(gè)疑問(wèn), 要是把兩個(gè)兄弟元素都規(guī)定插入同一個(gè)插槽, 會(huì)出現(xiàn)什么情況? 會(huì)按序插入, 還是我想的那樣直接覆蓋呢…

父組件分兩次傳給before插槽試一下:

<!-- 父組件.wxml -->
<navbar model:list="{{datalist}}">
  <view slot="before">
    <text>slot:before |</text>
  </view>
  <view slot="before">
    <text>slot:after</text>
  </view>
</navbar>

可見(jiàn)并不會(huì)覆蓋, 而是按照傳入的先后順序依次排列, 相當(dāng)于一次性傳入.

三、樣式

組件現(xiàn)在可以設(shè)置自己內(nèi)部的默認(rèn)樣式了, 按照Vue的思想, 即便向組件插槽內(nèi)傳入內(nèi)容, 組件的樣式也不會(huì)影響到插槽內(nèi)容的樣式, 但是現(xiàn)在這種隔離變得更加可控.

:host

通過(guò)wxss選擇器:host實(shí)現(xiàn)規(guī)定當(dāng)前子組件內(nèi)的默認(rèn)樣式, 并且可以影響到傳入子組件插槽的內(nèi)容:

舉例:

/* 子組件.wxss */
.active {    /* 活躍的navbarItem字體為亮綠色 */
  color: lightgreen;
}

/* 組件內(nèi)所有文字默認(rèn)粉色 */
:host {
  color: pink;
}

然后我們還是用具名插槽傳那倆值, 看下效果, 此時(shí)"衣服"選項(xiàng)活躍:

styleIsolation可控化樣式隔離

允許直接開(kāi)發(fā)者直接控制父子組件之間的樣式分享規(guī)則;

直接放在子組件json里使用, 就像這樣:

{
  "component": true,
  "usingComponents": {},
  "styleIsolation": "shared"
}

就拿"styleIsolation": "shared"舉個(gè)例子, 我在父組件的WXSS中, 指定一個(gè)子組件元素的樣式:

{
  "component": true,
  "usingComponents": {},
  "styleIsolation": "shared"
}

<!-- 子組件 -->
<view class="box">
  <slot name="before"></slot>
  <!-- 略 -->
  <slot name="after"></slot>
</view>

externalClasses外部樣式類(lèi)

將子組件內(nèi)部元素的類(lèi)名暴露, 允許在父組件內(nèi)傳入子組件內(nèi)部元素類(lèi)名.
比如子組件里有個(gè)長(zhǎng)100px寬100px的div, 使用外部樣式類(lèi)可以做到由父組件傳入一個(gè)類(lèi)名, 實(shí)現(xiàn)父組件類(lèi)名設(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)部這就是一個(gè)普通的類(lèi)名, 那么是不是也可以在子組件wxss里使用它呢:

在既由外部傳入又有自身樣式的情況下, 樣式類(lèi)的優(yōu)先級(jí)是未被定義的, 也就是說(shuō)會(huì)出現(xiàn)覆蓋情況?那么是個(gè)別樣式的覆蓋還是對(duì)于整個(gè)樣式類(lèi)的覆蓋呢, 我試了一下:

根據(jù)結(jié)果來(lái)看, 其實(shí)只要將一個(gè)子組件類(lèi)名指定為externalClasses, 它就不可再作為普通類(lèi)名使用, 而且原因應(yīng)該也不是產(chǎn)生了樣式類(lèi)覆蓋, 因?yàn)楦附M件不給子組件傳類(lèi)名的情況下, 被指定為externalClasses的類(lèi)名也不可以作為普通類(lèi)名使用, 它根本不生效:

<view class="my-class">子組件</view>

//子組件js, 將my-class指定為externalClasses.
Component({
  externalClasses: ['my-class']
})

/* 子組件樣式 */
.my-class {
  height: 100px;
  width: 100px;
  color: yellow;
  background-color: aqua;
}

然后直接來(lái)看父組件不傳類(lèi)名的情況:

<!-- 父組件中引入的子組件 -->
<my-component />

可以明顯看到的是沒(méi)有顏色, 說(shuō)明即便父組件不傳入類(lèi)名, my-class也不再能作為普通類(lèi)名使用了.

使用頁(yè)面/父組件的樣式

在配置了父子組件存在樣式隔離的情況下, 出現(xiàn)子組件需要使用父組件或頁(yè)面的樣式類(lèi)的需求, 可以使用這個(gè).
通過(guò)在類(lèi)名添加步驟進(jìn)行一些額外操作來(lái)完成:

<!-- 使用引入頁(yè)面的類(lèi) -->
<view class="~blue-text"> 這段文本是藍(lán)色的 </view>

<!-- 使用父組件的類(lèi) -->
<view class="^red-text"> 這段文本是紅色的 </view>

總結(jié)

還好有用過(guò)Vue, 學(xué)起來(lái)比較清晰.

文檔最下面還有一個(gè)虛擬化組件節(jié)點(diǎn), 這個(gè)本文沒(méi)有提到.

到此這篇關(guān)于微信小程序中slot插槽基本使用的文章就介紹到這了,更多相關(guān)微信小程序slot插槽使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論