vue中關(guān)于插槽的文檔說明很短泣懊，語言又寫的很凝練嚷辅，再加上其和methods咕痛，data痢甘，computed等常用選項使用頻率、使用先后上的差別暇检，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生“算了吧产阱，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”块仆，于是就關(guān)閉了vue說明文檔构蹬。

實際上，插槽的概念很簡單悔据，下面通過分三部分來講庄敛。這個部分也是按照vue說明文檔的順序來寫的。

進(jìn)入三部分之前科汗，先讓還沒接觸過插槽的同學(xué)對什么是插槽有一個簡單的概念：插槽藻烤，也就是slot，是組件的一塊HTML模板头滔，這塊模板顯示不顯示怖亭、以及怎樣顯示由父組件來決定。 實際上兴猩，一個slot最核心的兩個問題這里就點出來了早歇，是顯示不顯示和怎樣顯示箭跳。

由于插槽是一塊模板谱姓，所以，對于任何一個組件路翻，從模板種類的角度來分帚桩，其實都可以分為非插槽模板和插槽模板兩大類账嚎。
非插槽模板指的是html模板郭蕉，指的是‘div喂江、span获询、ul拐袜、table’這些梢薪，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot甜攀，它是一個空殼子规阀，因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制瘦麸。但是插槽顯示的位置確由子組件自身決定瞎暑，slot寫在組件template的哪塊了赌，父組件傳過來的模板將來就顯示在哪塊勿她。

單個插槽 | 默認(rèn)插槽 | 匿名插槽

首先是單個插槽逢并，單個插槽是vue的官方叫法砍聊，但是其實也可以叫它默認(rèn)插槽，或者與具名插槽相對蟹肘，我們可以叫它匿名插槽俯树。因為它不用設(shè)置name屬性许饿。

單個插槽可以放置在組件的任意位置，但是就像它的名字一樣秽晚，一個組件中只能有一個該類插槽。相對應(yīng)的爆惧，具名插槽就可以有很多個狸页，只要名字（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>

在這個例子里址遇，因為父組件在<child></child>里面寫了html模板斋竞，那么子組件的匿名插槽這塊模板就是下面這樣倔约。也就是說，子組件的匿名插槽被使用了坝初，是被下面這塊模板使用了。

<div class="tmpl">
  <span>菜單1</span>
  <span>菜單2</span>
  <span>菜單3</span>
  <span>菜單4</span>
  <span>菜單5</span>
  <span>菜單6</span>
</div>

最終的渲染結(jié)果如圖所示：

image.png

注：所有demo都加了樣式鳄袍，以方便觀察拗小。其中剿配，父組件以灰色背景填充，子組件都以淺藍(lán)色填充呼胚。

具名插槽

匿名插槽沒有name屬性蝇更，所以是匿名插槽，那么界牡，插槽加了name屬性簿寂，就變成了具名插槽。具名插槽可以在一個組件中出現(xiàn)N次宿亡。出現(xiàn)在不同的位置常遂。下面的例子，就是一個有兩個具名插槽和單個插槽的組件挽荠，這三個插槽被父組件用同一套css樣式顯示了出來克胳，不同的是內(nèi)容上略有區(qū)別平绩。

父組件：

<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>

顯示結(jié)果如圖：

image.png

可以看到，父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽漠另。沒有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽捏雌。

作用域插槽 | 帶數(shù)據(jù)的插槽

最后，就是我們的作用域插槽笆搓。這個稍微難理解一點性湿。官方叫它作用域插槽，實際上满败，對比前面兩種插槽肤频，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢算墨，就是前面兩種宵荒，都是在組件的template里面寫

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>

但是作用域插槽要求，在slot上面綁定數(shù)據(jù)净嘀。也就是你得寫成大概下面這個樣子报咳。

<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共同決定，但是這套樣式里面的內(nèi)容呢鸿脓？

正因為作用域插槽綁定了一套數(shù)據(jù)抑钟，父組件可以拿來用。于是野哭，情況就變成了這樣：樣式父組件說了算在塔，但內(nèi)容可以顯示子組件插槽綁定的。

我們再來對比拨黔，作用域插槽和單個插槽和具名插槽的區(qū)別蛔溃，因為單個插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中贺待，你看到的文字徽曲，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容麸塞；而作用域插槽秃臣，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數(shù)據(jù)的前提下）。

下面的例子哪工，你就能看到奥此，父組件提供了三種樣式(分別是flex、ul正勒、直接顯示)得院，都沒有提供數(shù)據(jù)，數(shù)據(jù)使用的都是子組件插槽自己綁定的那個人名數(shù)組章贞。

父組件：

<template>
  <div class="father">
    <h3>這里是父組件</h3>
    <!--第一次使用：用flex展示數(shù)據(jù)-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用：用列表展示數(shù)據(jù)-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用：直接顯示數(shù)據(jù)-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽-->
    <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']
      }
    }
}

結(jié)果如圖所示：

image.png

github

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

地址點這里

本文來源于：https://segmentfault.com/a/1190000012996217?utm_source=tag-newest