插槽的種類：
1衬吆、默認(rèn)插槽秸滴、具名插槽、作用域插槽栈源、解構(gòu)插槽挡爵、動態(tài)插槽幾種。
轉(zhuǎn)原文：http://www.reibang.com/p/9194dd8e9b35

1.看看官網(wǎng)怎么說甚垦？

在 2.6.0 中茶鹃，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和
slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute艰亮。
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API闭翩，這套 API 的設(shè)計靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口迄埃。

2.分為哪幾種疗韵？

2.1默認(rèn)插槽

木有name的就是默認(rèn)插槽，捕獲所有未被匹配的內(nèi)容侄非。

   <slot>這是默認(rèn)的slot</slot>

定義一個子組件

Vue.component("test1", {
  template: `<div>
    Hello,蘇蘇!
    <slot>這是默認(rèn)的slot</slot>
   </div>`,
});

父組件中

<test1></test1>

此時的結(jié)果是：

Hello,蘇蘇!這是默認(rèn)的slot

<test1>這是蘇蘇來了</test1>

此時的結(jié)果是：

Hello,蘇蘇!這是蘇蘇來了

當(dāng)插槽有默認(rèn)值的時候蕉汪，重新定義的內(nèi)容將會覆蓋默認(rèn)內(nèi)容，反之顯示默認(rèn)內(nèi)容逞怨。

2.2具名插槽

有時我們需要多個插槽者疤，<slot> 元素有一個特殊的 attribute：name。這個 attribute 可以用來定義額外的插槽叠赦，一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”驹马。
在向具名插槽提供內(nèi)容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令除秀，并以 v-slot 的參數(shù)的形式提供其名稱窥翩，（原語法為slot="定義的名稱"）

定義一個子組件

Vue.component("test1", {
  template: `<div>
    Hello,蘇蘇!
    <slot name="name" ></slot>
    <slot name="age"></slot>
    <slot >這是默認(rèn)的slot</slot>
   </div>`,
});

父組件

<test1 style="margin: 20px"
      >eg：具名插槽的使用 <template slot="name">蘇蘇小蘇蘇111</template
      ><template slot="age">18歲</template></test1>

輸入內(nèi)容：

Hello,蘇蘇!蘇蘇小蘇蘇11118歲eg：具名插槽的使用

2.3作用域插槽

有時讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的，綁定在 <slot> 元素上的 attribute 被稱為插槽 prop×巯桑現(xiàn)在在父級作用域中寇蚊，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字。

定義一個子組件

Vue.component("test1", {
  template: `<div>
    Hello,蘇蘇!
    <slot name="name" play="玩游戲"></slot>
    <slot name="age"></slot>
    <slot play="玩耍">這是默認(rèn)的slot</slot>
    <slot say="說哈">這是默認(rèn)的slot</slot>
   </div>`,
});

父組件：

    <test1 style="margin: 20px"
      >eg：作用域插槽使用
      <template slot="name" slot-scope="play">Suunto{{ play }}</template></test1
    >

輸出：

Hello,蘇蘇! Suunto{ "play": "玩游戲" } eg：作用域插槽使用 eg：作用域插槽使用
父組件：

  <test1 style="margin: 20px"
      >eg：作用域插槽使用
      <template slot="name" slot-scope="{play}">Suunto{{ play }}</template></test1
    >

輸出：

Hello,蘇蘇! Suunto玩游戲 eg：作用域插槽使用 eg：作用域插槽使用

3.v-slot的使用

在 2.6.0 中棍好，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)仗岸。它取代了 slot 和 slot-scope

注意 v-slot 只能添加在 template 上 (或者獨(dú)占默認(rèn)插槽的縮寫語法)，這一點(diǎn)和已經(jīng)廢棄的 slot attribute 不同借笙。

 <test1 style="margin: 20px">
    <template v-slot:name>這是v-slot使用的具名插槽</template></test1
  >

<test1 style="margin: 20px">
     <template v-slot:default="{ play }"
       >這是v-slot使用的作用域插槽 {{ play }}</template
     ></test1
   >

 <test1 style="margin: 20px" v-slot:default="{ play }">
    獨(dú)占默認(rèn)插槽的縮寫語法：當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時扒怖，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用---{{ play}}
 </test1>

注意默認(rèn)插槽的縮寫語法不能和具名插槽混用，因為它會導(dǎo)致作用域不明確业稼，只要出現(xiàn)多個插槽盗痒，請始終為所有的插槽使用完整的基于template 的語法

4. 解構(gòu)插槽 Prop

定義一個子組件

Vue.component("test2", {
  props: ["lists"],
  template: `
            <div>
                <ul>
                    <li v-for="item in lists">
                        <slot :item="item"></slot>
                    </li>
                </ul>
            </div>
        `,
});

父組件

<test2 :lists="list" style="margin: 20px">
    <template v-slot="{ item }"> 解構(gòu)： {{ item }} </template>
  </test2>

輸出：

解構(gòu)： { "name": "蘇蘇1" }
解構(gòu)： { "name": "蘇蘇2" }
解構(gòu)： { "name": "蘇蘇3" }
解構(gòu)： { "name": "蘇蘇4" }

父組件：重命名

 <test2 :lists="list" style="margin: 20px">
    <template v-slot="{ item: user }"> 重命名： {{ user.name }} </template>
  </test2>

輸出：

重命名： 蘇蘇1
重命名： 蘇蘇2
重命名： 蘇蘇3
重命名： 蘇蘇4

父組件：定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形

<test2 :lists="list" style="margin: 20px">
 <template v-slot="{ item = { name: '2332' } }">
     定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形： {{ item.name }}
   </template>
 </test2>

5.動態(tài)插槽名

動態(tài)指令參數(shù)也可以用在 v-slot 上俯邓，來定義動態(tài)的插槽名

 <test1 style="margin: 20px">
     <template v-slot:[dynamicSlotName]> 動態(tài)插槽名--sss </template>
 </test1>
 ...
 dynamicSlotName: "name",

輸出：

Hello,蘇蘇! 動態(tài)插槽名--sss 這是默認(rèn)的slot 這是默認(rèn)的slot

6.具名插槽的縮寫

具名插槽的縮寫,跟 v-on 和 v-bind 一樣骡楼，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #稽鞭。例如 v-slot:header 可以被重寫為 #header,然而鸟整，和其它指令一樣，該縮寫只在其有參數(shù)的時候才可用朦蕴，你希望使用縮寫的話篮条，你必須始終以明確插槽名取而代之，以#default=開始

7.完整代碼

<template>
  <div class="contentBox">
    <List>
      <ListItem>
        <ListItemMeta
          :avatar="src"
          title="什么是插槽"
          description="插槽就是Vue實現(xiàn)的一套內(nèi)容分發(fā)的API吩抓，將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口,沒有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用"
        />
      </ListItem>
      <ListItem>
        <ListItemMeta
          :avatar="src"
          title="什么是默認(rèn)插槽"
          description=" 木有name的就是默認(rèn)插槽涉茧，捕獲所有未被匹配的內(nèi)容"
        />
      </ListItem>
      <ListItem>
        <ListItemMeta
          :avatar="src"
          title="什么是具名插槽"
          description="具名插槽，就是給這個插槽起個名字疹娶，如起名一個為name降瞳，一個為age，一個不命名"
        />
      </ListItem>
      <ListItem>
        <ListItemMeta
          :avatar="src"
          title="什么是作用域插槽"
          description="組件上的屬性蚓胸，可以在組件元素內(nèi)使用挣饥，如為slot定義一個play屬性，使用組件時候添加屬性slot-scope"
        />
      </ListItem>
      <ListItem>
        <ListItemMeta
          :avatar="src"
          title="什么是解構(gòu)插槽 Prop"
          description="作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包裹在一個擁有單個參數(shù)的函數(shù)里沛膳，可以使用 ES2015 解構(gòu)來傳入具體的插槽 prop"
        />
      </ListItem>
    </List>
    <test1 style="margin: 20px"></test1>
    <test1 style="margin: 20px">eg：插槽的使用</test1>
    <test1 style="margin: 20px"
      >eg：具名插槽的使用 <template slot="name">蘇蘇小蘇蘇111</template
      ><template slot="age">18歲</template></test1
    >
    <test1 style="margin: 20px"
      >eg：作用域插槽使用
      <template slot="name" slot-scope="play">Suunto{{ play }}</template></test1
    >
    <test1 style="margin: 20px"
      >eg：作用域插槽使用
      <template slot="name" slot-scope="{ play }"
        >Suunto{{ play }}</template
      ></test1
    >
    <div style="margin: 20px; font-weight: bold; font-size: 25px">
      作用域插槽使用
    </div>
    <test2 :lists="list" style="margin: 20px">
      <template slot-scope="item">
        {{ item }}
      </template>
    </test2>
    <test2 :lists="list" style="margin: 20px">
      <template slot-scope="{ item }">
        {{ item.name }}
      </template>
    </test2>
    <test2 :lists="list" style="margin: 20px">
      <template slot-scope="{ item }">
        <div v-if="item.name == '蘇蘇1'">數(shù)據(jù)1</div>
        <div v-else>其他數(shù)據(jù)</div>
      </template>
    </test2>
    <div style="margin: 20px; font-weight: bold; font-size: 25px">
      v-slot的使用
    </div>
    <div style="margin: 20px; font-weight: bold; font-size: 20px">
      注意 v-slot 只能添加在 template 上
      (或者獨(dú)占默認(rèn)插槽的縮寫語法)扔枫，這一點(diǎn)和已經(jīng)廢棄的 slot attribute 不同。
    </div>
    <test1 style="margin: 20px">
      <template v-slot:name>這是v-slot使用的具名插槽</template></test1
    >
    <test1 style="margin: 20px">
      <template v-slot:default="{ play }"
        >這是v-slot使用的作用域插槽 {{ play }}</template
      ></test1
    >
    <test1 style="margin: 20px" v-slot:default="{ play }">
      獨(dú)占默認(rèn)插槽的縮寫語法：當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時锹安，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用------{{
        play
      }}
    </test1>
    <test1 style="margin: 20px" v-slot="{ play }">
      獨(dú)占默認(rèn)插槽的縮寫語法：不帶參數(shù)的 v-slot 被假定對應(yīng)默認(rèn)插槽 -------{{
        play
      }}
    </test1>
    <div style="margin: 20px; font-weight: bold; font-size: 20px">
      注意默認(rèn)插槽的縮寫語法不能和具名插槽混用短荐，因為它會導(dǎo)致作用域不明確，只要出現(xiàn)多個插槽叹哭，請始終為所有的插槽使用完整的基于
      template 的語法
    </div>
    <div style="margin: 20px; font-weight: bold; font-size: 20px">
      解構(gòu)插槽 Prop
    </div>
    <test2 :lists="list" style="margin: 20px">
      <template v-slot="{ item }"> 解構(gòu)： {{ item }} </template>
    </test2>
    <test2 :lists="list" style="margin: 20px">
      <template v-slot="{ item: user }"> 重命名： {{ user.name }} </template>
    </test2>
    <test2 :lists="list" style="margin: 20px">
      <template v-slot="{ item = { name: '2332' } }">
        定義后備內(nèi)容忍宋，用于插槽 prop 是 undefined 的情形： {{ item.name }}
      </template>
    </test2>
    <div style="margin: 20px; font-weight: bold; font-size: 20px">
      動態(tài)插槽名
    </div>
    <test1 style="margin: 20px">
      <template v-slot:[dynamicSlotName]> 動態(tài)插槽名--sss </template>
    </test1>
    <div style="margin: 20px; font-weight: bold; font-size: 20px">
      具名插槽的縮寫,跟 v-on 和 v-bind 一樣，v-slot
      也有縮寫风罩，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #糠排。例如
      v-slot:header 可以被重寫為
      #header,然而，和其它指令一樣超升，該縮寫只在其有參數(shù)的時候才可用入宦，你希望使用縮寫的話，你必須始終以明確插槽名取而代之室琢，以#default=開始
    </div>
  </div>
</template>

<script>
// 在 2.6.0 中乾闰，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute
import Vue from "vue";
Vue.component("test1", {
  template: `<div>
    Hello,蘇蘇!
    <slot name="name" play="玩游戲"></slot>
    ---這是米----
    <slot name="age"></slot>
    <slot play="玩耍">這是默認(rèn)的slot</slot>
    <slot say="說哈">這是默認(rèn)的slot</slot>
   </div>`,
});

// 綁定在 <slot> 元素上的 attribute 被稱為插槽 prop
Vue.component("test2", {
  props: ["lists"],
  template: `
            <div>
                <ul>
                    <li v-for="item in lists">
                        <slot :item="item"></slot>
                    </li>
                </ul>
            </div>
        `,
});
export default {
  data() {
    return {
      dynamicSlotName: "name",
      src: require("@/assets/img/susu.jpg"),
      list: [
        {
          name: "蘇蘇1",
        },
        {
          name: "蘇蘇2",
        },
        {
          name: "蘇蘇3",
        },
        {
          name: "蘇蘇4",
        },
      ],
    };
  },
};
</script>

<style>
</style>

8.完整代碼盈滴，關(guān)注公眾號 蘇蘇的bug涯肩，更多vue相關(guān)，盡在蘇蘇的碼云如果對你有幫助，歡迎你的star+訂閱病苗！

作者：蘇蘇就是小蘇蘇
鏈接：http://www.reibang.com/p/9194dd8e9b35
來源：簡書
著作權(quán)歸作者所有疗垛。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處铅乡。