Vue3从入门到实战：深度掌握通信插槽slot

曾经终败给现在 2024-04-26 01:50 71阅读 0赞

**slot\_默认插槽的概念：**

在Vue中，插槽（slot）是一种用于在组件中插入内容的特殊技术。默认插槽是其中一种类型的插槽，它允许你在组件的模板中指定一个位置，以便在使用组件时插入自定义的内容。

想象一下你有一个组件，它有一些固定的结构和内容，但你希望在使用这个组件时，能够灵活地插入额外的内容。这就像是你有一个模板，但你希望能够在特定的位置插入自己的文本或元素。

默认插槽就是为了满足这个需求而设计的。在组件的模板中，你可以使用 `<slot></slot>` 标签来标记一个位置，表示这里可以插入额外的内容。当你在使用组件时，可以将自定义的内容放置在这个位置，这样它们就会被插入到组件的对应位置上。

以一个简单的卡片组件为例，卡片的主体部分是固定的，但你希望在卡片的底部插入自己的文本或按钮。你可以在组件的模板中定义一个默认插槽，使用 `<slot></slot>` 标签表示插入位置。然后，在使用组件时，你可以在对应的位置插入自己的内容。

默认插槽允许你以一种灵活的方式定制组件的部分内容，使组件能够适应不同的使用场景和需求。通过使用默认插槽，你可以将一些组件的部分交给使用者来灵活控制，增加了组件的可定制性和复用性。

但需要注意的是，默认插槽可以有默认内容，即当没有提供自定义内容时，会显示默认内容。你可以在 `<slot></slot>` 标签中添加默认的文本或元素，这样当没有插入自定义内容时，会显示默认内容。

### 1\_slot\_默认插槽 ###

**1.准备一个父组件（Father.vue）**

![209f22b1bb2c4092b2d409566ae45603.png][]

**2.子组件 Category.vue**

![3452b3951bed47b4b655ca50e2171b56.png][]

**整体展示：**

![1ee7e39376644fb4b6d3cb13f3e12b95.png][]

**1.父组件给子组件传标题title**

![0f57e964994044e593f8ebb9711fc286.png][]

展示：

![065426dafefc4f6fad63074656c523be.png][]

**2.在父组件定义数据，分别放入到不同标题下的内容**![cd07f5ee8d914816a2ee4c1d66b312c1.png][]

**3.用双组件，把每块要传入的数据会放在slot之间**

![dfc27eabac0646c9be2198787c3b46f7.png][]

**展示：**

![2bccf46e8e1240d1806641eeb966b1cc.png][]

补充：

为什么要用slot插槽呢 ？

因为可以渲染不同的内容，游戏是数组，美食是图片，影视是视频

你如何把他们分别呈现在对应标题下呢，就可以用slot插槽了（其实用v-if/show也可以，但插槽更好）

不然你看下面：

![aabc2ad18cb142a8a80583e3410ddb54.png][]

![a6dcf06aa7a94dc489879be4d59e345e.png][]

**Father.vue代码：**

<template>
      <div class="father">
        <h3>父组件</h3>
        <div class="content">
          <Category>
              <ul>
                <li v-for="g in games" :key="g.id">{
       { g.name }}</li>
              </ul>
          
              <h2>热门游戏列表</h2>
          </Category>
    
          <Category>
       
              <img :src="imgUrl" alt="">
              <h2>今日美食城市</h2>
          </Category>
    
          <Category>
              <video video :src="videoUrl" controls></video>
              <h2>今日影视推荐</h2>
          </Category>
        </div>
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
      import Category from './Category.vue'
      import { ref,reactive } from "vue";
    
      let games = reactive([
        {id:'asgytdfats01',name:'英雄联盟'},
        {id:'asgytdfats02',name:'王者农药'},
        {id:'asgytdfats03',name:'红色警戒'},
        {id:'asgytdfats04',name:'斗罗大陆'}
      ])
      let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
      let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
    
    </script>
    
    <style scoped>
      .father {
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
      }
      .content {
        display: flex;
        justify-content: space-evenly;
      }
      img,video {
        width: 100%;
      }
      h2 {
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
      }
    </style>

**Category.vue代码：**

<template>
      <div class="category">
        <slot>默认内容</slot>
       
      </div>
    </template>
    
    <script setup lang="ts" name="Category">
      
    </script>
    
    <style scoped>
      .category {
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
        width: 200px;
        height: 300px;
      }
    </style>

--------------------

### 2\_slot\_具名插槽 ###

**slot\_具名插槽的概念：**和默认插槽没什么区别 ，只是给插槽起了个名字。

如果给 插槽起个名，

![1d3dd0898aa5425293bb72e1eaa544fc.png][]

![e8bd5b5787ef4a3898192e9ecd4258e0.png][] 此时<Category>没有引用s2，所以去寻找默认插槽，找不到名为s2的插槽，所以不呈现。

**那如何引用呢？**

**1.用v-slot指令**

**2.将v-slot指令放在<template>中**

![f89f44e5c1c14059811e9a9b58eba5bf.png][]

**呈现：**

![2bccf46e8e1240d1806641eeb966b1cc.png][]

**也可以通过具名插槽来对数据进行自己想要排放好的顺序。**

![8761996773df4da499b7be012cddf351.png][]

![2bccf46e8e1240d1806641eeb966b1cc.png][]

**补充：**

**v-slot指令可以用“\#”来代替**

![82f7bd043b3a4d798829e48b42c32764.png][]

**Father.vue代码：**

<template>
      <div class="father">
        <h3>父组件</h3>
        <div class="content">
          <Category>
            <template v-slot:s2>
              <ul>
                <li v-for="g in games" :key="g.id">{
       { g.name }}</li>
              </ul>
            </template>
            <template v-slot:s1>
              <h2>热门游戏列表</h2>
            </template>
          </Category>
    
          <Category>
            <template v-slot:s2>
              <img :src="imgUrl" alt="">
            </template>
            <template v-slot:s1>
              <h2>今日美食城市</h2>
            </template>
          </Category>
    
          <Category>
            <template #s2>
              <video video :src="videoUrl" controls></video>
            </template>
            <template #s1>
              <h2>今日影视推荐</h2>
            </template>
          </Category>
        </div>
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
      import Category from './Category.vue'
      import { ref,reactive } from "vue";
    
      let games = reactive([
        {id:'asgytdfats01',name:'英雄联盟'},
        {id:'asgytdfats02',name:'王者农药'},
        {id:'asgytdfats03',name:'红色警戒'},
        {id:'asgytdfats04',name:'斗罗大陆'}
      ])
      let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
      let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
    
    </script>
    
    <style scoped>
      .father {
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
      }
      .content {
        display: flex;
        justify-content: space-evenly;
      }
      img,video {
        width: 100%;
      }
      h2 {
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
      }
    </style>

**Category.vue代码：**

<template>
      <div class="category">
        <slot name="s1">默认内容</slot>
        <slot name="s2">默认内容</slot>
       
      </div>
    </template>
    
    <script setup lang="ts" name="Category">
      
    </script>
    
    <style scoped>
      .category {
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
        width: 200px;
        height: 300px;
      }
    </style>

--------------------

### 3\_slot\_作用域插槽 ###

**slot\_作用域插槽的概念：**

在Vue中，作用域插槽（scoped slot）是一种特殊的插槽技术，它允许你向组件传递数据，并在插槽内部使用这些数据。

想象一下你有一个组件，它有一个插槽，你希望能够向插槽内部传递一些数据，并在插槽内部根据这些数据进行一些处理或显示。这就像是你给一个盒子里面放入了一些物品，并允许别人在盒子里对这些物品进行操作。

作用域插槽就是为了满足这个需求而设计的。在组件的模板中，你可以使用 `<slot>` 标签，并在标签中添加一个特殊的属性，比如 `v-slot`，来定义作用域插槽。通过这个属性，你可以向插槽内部传递数据。

当你在使用组件时，可以在组件的标签中使用特殊的语法，比如 `v-slot` 或 `slot-scope`，来接收传递给插槽的数据。然后，在插槽内部，你可以使用这些数据进行一些处理、显示或其他操作。

要想讲好作用域插槽 ，先对组件进行部分修改

**1.将Category.vue组件替换成Game.vue组件**

![512565b77520449bbf0347d10e4ee464.png][]

**2.父组件（Father.vue）调用三次子组件（Game.vue）**

![92369c5cff4742959d482d5e3776ffa6.png][]

**展示：**

![c1a3c3f054b044d0ad667e36dc206e83.png][]

**3.现在，我要将标题下的游戏内容进行如下修改**  
**1.第一个是无序列表**

**2.第二个是有序列表**

**3.第三个不是列表，是h3标签表示**

数据在子组件这里，但是根据数据生成的结构，却由父组件来决定。但是父组件不能直接拿到子组件的数据，这就涉及到作用域的问题，我们可以用作用域插槽来解决这个问题。

![2181b8e36d77400b963f0e64febb557c.png][]

--------------------

![0f41467ea147403db7689de94b33bc39.png][]

**补充：**

大部分作用域插槽都是应用在UI库中，就好像UI库的作者在子组件写好了数据，你直接拿来决定数据的结构，嘿嘿嘿。

**Father.vue代码：**

<template>
      <div class="father">
        <h3>父组件</h3>
        <div class="content">
          <Game>
            <template v-slot="params">
              <ul>
                <li v-for="y in params.youxi" :key="y.id">
                  {
       { y.name }}
                </li>
              </ul>
            </template>
          </Game>
    
          <Game>
            <template v-slot="params">
              <ol>
                <li v-for="item in params.youxi" :key="item.id">
                  {
       { item.name }}
                </li>
              </ol>
            </template>
          </Game>
    
          <Game>
            <template #default="{youxi}">
              <h3 v-for="g in youxi" :key="g.id">{
       { g.name }}</h3>
            </template>
          </Game>
    
        </div>
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
      import Game from './Game.vue'
    </script>
    
    <style scoped>
      .father {
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
      }
      .content {
        display: flex;
        justify-content: space-evenly;
      }
      img,video {
        width: 100%;
      }
    </style>

**Category.vue代码：**

<template>
      <div class="game">
        <h2>游戏列表</h2>
        <slot :youxi="games"></slot>
      </div>
    </template>
    
    <script setup lang="ts" name="Game">
      import {reactive} from 'vue'
      let games = reactive([
        {id:'asgytdfats01',name:'英雄联盟'},
        {id:'asgytdfats02',name:'王者农药'},
        {id:'asgytdfats03',name:'红色警戒'},
        {id:'asgytdfats04',name:'斗罗大陆'}
      ])
    </script>
    
    <style scoped>
      .game {
        width: 200px;
        height: 300px;
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
      }
      h2 {
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
      }
    </style>

--------------------

**总结：**

总结起来，Vue中的插槽分为三种类型：默认插槽（Default Slot）、作用域插槽（Scoped Slot）和具名插槽（Named Slot）。

1.  **默认插槽（Default Slot）**：允许在组件中指定一个位置，用于插入自定义内容。可以提供默认内容，当没有自定义内容时，显示默认内容。默认插槽增加了组件的可复用性和灵活性。
2.  **作用域插槽（Scoped Slot）**：允许向组件传递数据，并在插槽内部使用这些数据进行处理或显示。通过作用域插槽，使用者可以将数据从组件传递到插槽内部，实现高级的定制功能。
3.  **具名插槽（Named Slot）**：允许在组件中定义多个命名的插槽，并通过名称来指定要插入的内容。使用具名插槽，我们可以在组件的模板中为每个插槽指定特定的名称，并在使用组件时通过特殊的语法将内容插入到指定的插槽中。

[209f22b1bb2c4092b2d409566ae45603.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f5fca2ab3e50479bb9a248fc3756eaa3.png
[3452b3951bed47b4b655ca50e2171b56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/618299353cb047ee8c93a91c01df6216.png
[1ee7e39376644fb4b6d3cb13f3e12b95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5dc445943f5b4d0fb9cc986075515e26.png
[0f57e964994044e593f8ebb9711fc286.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/35f87f498e254da7ba8e7f4eeddc2ee3.png
[065426dafefc4f6fad63074656c523be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3e01ed94130046c5bc6b31e5a1d25359.png
[cd07f5ee8d914816a2ee4c1d66b312c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8e52dc2e40374c7497e9a00cb3eb7ea7.png
[dfc27eabac0646c9be2198787c3b46f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/218e8f69956848c4bfe0a4df965ceaca.png
[2bccf46e8e1240d1806641eeb966b1cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8abccd7f3e4d42d6a78e83f023759c34.png
[aabc2ad18cb142a8a80583e3410ddb54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0161c68048a44db4a1587fbaa3c3c4f1.png
[a6dcf06aa7a94dc489879be4d59e345e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b3a8cdcf2abb4998a468d2134366145a.png
[1d3dd0898aa5425293bb72e1eaa544fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7eb84b73a87546fea09216c77b435151.png
[e8bd5b5787ef4a3898192e9ecd4258e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e2dec29b7fe14d53abbc83c5a7684710.png
[f89f44e5c1c14059811e9a9b58eba5bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/64ef20ee319d439ca2a7f9ccdd060fb8.png
[8761996773df4da499b7be012cddf351.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4e117c9ee2d64d4aadb4133f4fbe82dc.png
[82f7bd043b3a4d798829e48b42c32764.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/cfa15f1b551a45d8ad4022491f9b354e.png
[512565b77520449bbf0347d10e4ee464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3895d7a3e3f64d429f64bddd802b1d44.png
[92369c5cff4742959d482d5e3776ffa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/39f1847711e04089b697653d6218ee71.png
[c1a3c3f054b044d0ad667e36dc206e83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4a2ae0834c334988907f15928cdf4b50.png
[2181b8e36d77400b963f0e64febb557c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d0ab4b42c68c4f42ba8ddb6b481807ae.png
[0f41467ea147403db7689de94b33bc39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/edb7cb4d191f49ffb55293628f4aa9af.png