深入理解vue中的slot與slot-scope

lotus_ruan發表於2021-09-09

作者/雲荒杯傾

寫在前面

vue中關於插槽的文件說明很短,語言又寫的很凝練,再加上其和methods,data,computed等常用選項在使用頻率、使用先後上的差別,這就有可能造成初次接觸插槽的開發者容易產生“算了吧,回頭再學,反正已經可以寫基礎元件了”的想法,於是就關閉了vue的說明文件。

實際上,插槽的概念很簡單,下面通過分三部分來講。這三部分也是按照vue說明文件的順序來寫的。

進入這三部分之前,先讓還沒接觸過插槽的同學對什麼是插槽有一個簡單的概念:插槽,也就是slot,是元件的一塊HTML模板,這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。 實際上,一個slot最核心的兩個問題在這裡就點出來了,是顯示不顯示怎樣顯示

由於插槽是一塊模板,所以,對於任何一個元件,從模板種類的角度來分,其實都可以分為非插槽模板插槽模板兩大類。 非插槽模板指的是html模板,比如‘div、span、ul、table’這些,非插槽模板的顯示與隱藏以及怎樣顯示由元件自身控制;插槽模板是slot,它是一個空殼子,因為它的顯示與隱藏以及最後用什麼樣的html模板顯示由父元件控制。但是插槽顯示的位置卻由子元件自身決定,slot寫在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置

單個插槽 | 預設插槽 | 匿名插槽

首先是單個插槽,單個插槽是vue的官方叫法,但是其實也可以叫它預設插槽,或者與具名插槽相對,我們可以叫它匿名插槽。因為它不用設定name屬性。

單個插槽可以放置在元件的任意位置,但是就像它的名字一樣,一個元件中只能有一個該類插槽。相對應的,具名插槽就可以有很多個,只要名字(name屬性)不同就可以了。

下面通過一個例子來展示。

父元件:

<template>
    <div class="father">
        <h3>這裡是父元件</h3>
        <child>
            <div class="tmpl">
              <span>選單1</span>
              <span>選單2</span>
              <span>選單3</span>
              <span>選單4</span>
              <span>選單5</span>
              <span>選單6</span>
            </div>
        </child>
    </div>
</template>
複製程式碼

子元件:

<template>
    <div class="child">
        <h3>這裡是子元件</h3>
        <slot></slot>
    </div>
</template>
複製程式碼

在這個例子裡,因為父元件在裡面寫了html模板,那麼子元件的匿名插槽這塊模板就是下面這樣。也就是說,子元件的匿名插槽被使用了,是被下面這塊模板使用了。

<div class="tmpl">
  <span>選單1</span>
  <span>選單2</span>
  <span>選單3</span>
  <span>選單4</span>
  <span>選單5</span>
  <span>選單6</span>
</div>
複製程式碼

最終的渲染結果如圖所示:

深入理解vue中的slot與slot-scope


注:所有demo都加了樣式,以方便觀察。其中,父元件以灰色背景填充,子元件都以淺藍色填充。
複製程式碼

具名插槽

匿名插槽沒有name屬性,所以是匿名插槽,那麼,插槽加了name屬性,就變成了具名插槽。具名插槽可以在一個元件中出現N次,出現在不同的位置。下面的例子,就是一個有兩個具名插槽單個插槽的元件,這三個插槽被父元件用同一套css樣式顯示了出來,不同的是內容上略有區別。

父元件:

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>選單1</span>
        <span>選單2</span>
        <span>選單3</span>
        <span>選單4</span>
        <span>選單5</span>
        <span>選單6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>選單-1</span>
        <span>選單-2</span>
        <span>選單-3</span>
        <span>選單-4</span>
        <span>選單-5</span>
        <span>選單-6</span>
      </div>
      <div class="tmpl">
        <span>選單->1</span>
        <span>選單->2</span>
        <span>選單->3</span>
        <span>選單->4</span>
        <span>選單->5</span>
        <span>選單->6</span>
      </div>
    </child>
  </div>
</template>
複製程式碼

子元件:

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>這裡是子元件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>
複製程式碼

顯示結果如圖:

深入理解vue中的slot與slot-scope

可以看到,父元件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板預設關聯匿名插槽。

作用域插槽 | 帶資料的插槽

最後,就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽,實際上,對比前面兩種插槽,我們可以叫它帶資料的插槽。什麼意思呢,就是前面兩種,都是在元件的template裡面寫

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
複製程式碼

但是作用域插槽要求,在slot上面繫結資料。也就是你得寫成大概下面這個樣子。

<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}
複製程式碼

我們前面說了,插槽最後顯示不顯示是看父元件有沒有在child下面寫模板,像下面那樣。

<child>
   html模板
</child>
複製程式碼

寫了,插槽就總得在瀏覽器上顯示點東西,東西就是html該有的模樣,沒寫,插槽就是空殼子,啥都沒有。 OK,我們說有html模板的情況,就是父元件會往子元件插模板的情況,那到底插一套什麼樣的樣式呢,這由父元件的html+css共同決定,但是這套樣式裡面的內容呢?

正因為作用域插槽繫結了一套資料,父元件可以拿來用。於是,情況就變成了這樣:樣式父元件說了算,但內容可以顯示子元件插槽繫結的。

我們再來對比,作用域插槽跟單個插槽和具名插槽的區別,因為單個插槽和具名插槽不繫結資料,所以父元件提供的模板一般要既包括樣式又包括內容,上面的例子中,你看到的文字,“選單1”,“選單2”都是父元件自己提供的內容;而作用域插槽,父元件只需要提供一套樣式(在確實用作用域插槽繫結的資料的前提下)。

下面的例子,你就能看到,父元件提供了三種樣式(分別是flex、ul、直接顯示),都沒有提供資料,資料使用的都是子元件插槽自己繫結的那個陣列(一堆人名的那個陣列)。

父元件:

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <!--第一次使用:用flex展示資料-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用:用列表展示資料-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用:直接顯示資料-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用:不使用其提供的資料, 作用域插槽退變成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>
複製程式碼

子元件:

<template>
  <div class="child">

    <h3>這裡是子元件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}
複製程式碼

結果如圖所示:

深入理解vue中的slot與slot-scope

github

以上三個demo就放在GitHub了,有需要的可以去取。使用非常方便,是基於vue-cli搭建的工程。

地址點這裡

最後

如果本文對你理解slot和scope-slot有幫助,請不要吝嗇手中的點贊喲。 程式設計貴在實踐,趕緊行動起來吧!

關於作者

技術部落格 || GitHub || 掘金主頁

相關文章