Vue 中插槽(Slot)用法大全

更新时间：2025年10月28日 14:43:31 作者：Slow菜鸟

本文给大家介绍Vue中插槽(Slot)用法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

（一）插槽用法概念

在Vue中，子组件的模板可以定义多个插槽（包括默认插槽和具名插槽等等），而父组件在引用子组件时，可以根据需要有选择性的为这些插槽插入内容。
如果父组件没有为某个插槽提供内容，那么子组件的模板中该插槽的位置将显示为该插槽的默认内容（如果有的话），或者简单地留空。

（二）插槽的基本类型

1. 默认插槽（Default Slot）

定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。
用法：在子组件中使用<slot></slot>定义默认插槽的位置，父组件中直接放在子组件标签内的内容会被渲染到该位置。

举例说明：
子组件 (DefaultSlotChild.vue)

<template>
  <div class="child">
    <h2>我是子组件的标题</h2>
     <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

父组件

<template>
  <div>
    <DefaultSlotChild>
      <!-- 这里的内容会被渲染到子组件的默认插槽中 -->
      <p>这是来自父组件的默认插槽内容。111</p>
      <p>这是来自父组件的默认插槽内容。222</p>
    </DefaultSlotChild>
  </div>
</template>
<script>
import DefaultSlotChild from './DefaultSlotChild.vue';
export default {
  components: {
    DefaultSlotChild
  }
}
</script>

父组件上最终效果

<template>
 <div> 
 <!-- 以下内容是子组件中的内容 begin-->  
  <template>
   <div class="child">  
    <h2>我是子组件的标题</h2>  
    <!-- 这里的内容会被渲染到子组件的默认插槽中 -->  
    <p>这是来自父组件的默认插槽内容。111</p>
    <p>这是来自父组件的默认插槽内容。222</p>
   </div> 
  </template> 
  <!-- 以上内容是子组件中的内容 end-->  
 </div>
</template>

2. 具名插槽（Named Slots）

定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。
用法：在子组件中使用<slot name="插槽名称"></slot>定义具名插槽，父组件中通过<template v-slot:插槽名称>或简写为<template #插槽名称>来指定内容应该插入哪个具名插槽。

举例说明：
子组件 (NamedSlotChild.vue)

<template>
  <div class="child">
    <header>
     <!-- 具名插槽：header -->
      <slot name="header"></slot> 
    </header>
    <main>
    <!-- 默认插槽 -->
      <slot></slot> 
    </main>
    <footer>
    <!-- 具名插槽：footer -->
      <slot name="footer"></slot> 
    </footer>
  </div>
</template>

父组件

<template>
  <NamedSlotChild>
    <template v-slot:header>
      <!-- 这里的内容会被渲染到子组件的header插槽中 -->
      <h1>这是标题</h1>
    </template>
    <p>这是默认插槽的内容。</p>
    <template v-slot:footer>
      <!-- 这里的内容会被渲染到子组件的footer插槽中 -->
      <p>这是页脚</p>
    </template>
  </NamedSlotChild>
</template>
<script>
import NamedSlotChild from './NamedSlotChild.vue';
export default {
  components: {
    NamedSlotChild
  }
}
</script>

3. 作用域插槽（Scoped Slots）

定义：一种特殊的插槽，允许子组件将数据暴露给父组件的插槽内容。
用法：
在子组件中，通过<slot :数据名="数据值"></slot>将数据传递给插槽；
在父组件中，通过<template v-slot:插槽名称="slotProps">接收数据，并使用slotProps来访问传递过来的数据。

举例说明
子组件 (ScopedSlotChild.vue)

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item">
        <!-- 后备内容 -->
        {{ item.text }}
      </slot>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '苹果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' }
      ]
    }
  }
}
</script>

父组件

<template>
  <ScopedSlotChild>
    <template v-slot:item="slotProps">
      <!-- 使用slotProps访问子组件传递的数据 -->
      <strong>{{ slotProps.item.text }}</strong>
    </template>
  </ScopedSlotChild>
</template>
<script>
import ScopedSlotChild from './ScopedSlotChild.vue';
export default {
  components: {
    ScopedSlotChild
  }
}
</script>

4. 动态插槽名（Dynamic Slot Names）

定义：允许插槽的名称是动态的，根据组件的状态或其他条件来决定使用哪个插槽。
用法：在父组件中，通过:slot="动态名称"来绑定插槽的名称，其中动态名称可以是一个计算属性、方法返回值或数据属性。

举例说明：

这个例子稍微复杂一些，因为它通常用于更高级的场景，比如根据条件动态渲染不同的插槽。但基本思想是使用计算属性或方法来返回插槽名。

子组件（与前面的例子类似，不需要特别修改）

父组件（简化示例）

<template>  
  <div>  
    <NamedSlotChild>  
      <!-- 使用计算属性dynamicSlotName来决定内容应该渲染到哪个插槽中 -->  
      <template v-slot:[dynamicSlotName]>  
        <p>这是根据条件动态插入到对应插槽的内容。</p>  
      </template>  
    </NamedSlotChild>  
  </div>  
</template>  
<script>  
import NamedSlotChild from './NamedSlotChild.vue';  
export default {  
  components: {  
    NamedSlotChild  
  },  
  computed: {  
    // 假设这里根据某个条件返回不同的插槽名  
    dynamicSlotName() {  
      // 示例：根据某个数据属性来决定  
      const someCondition = true; // 实际应用中这里可能是更复杂的逻辑或响应式数据  
      if (someCondition) {  
        return 'header';  
      } else {  
        return 'footer';  
      }  
    }  
  }  
}  
</script>

5. 插槽后备内容（Slot Fallback Content）

定义：当父组件没有为插槽提供内容时，子组件可以定义一些后备内容作为默认显示。
用法：在子组件的<slot>标签内部直接放置的内容，如果父组件没有为该插槽提供内容，则显示这些后备内容。

子组件 (SlotFallbackChild.vue)

<template>  
  <div>  
    <slot>  
      <!-- 后备内容：如果没有提供插槽内容，则显示这个 -->  
      <p>如果没有提供内容，将显示这段后备文本。</p>  
    </slot>  
  </div>  
</template>

父组件

<template>  
  <div>  
    <!-- 提供了插槽内容，所以后备内容不会显示 -->  
    <SlotFallbackChild>  
      <p>这是来自父组件的插槽内容。</p>  
    </SlotFallbackChild>  
    <!-- 没有提供插槽内容，将显示后备内容 -->  
    <SlotFallbackChild></SlotFallbackChild>  
  </div>  
</template>  
<script>  
import SlotFallbackChild from './SlotFallbackChild.vue';  
export default {  
  components: {  
    SlotFallbackChild  
  }  
}  
</script>

6. Vue 2.6.0之前与Vue 2.6.0后的比对

在Vue 2.6.0及以后的版本中，Vue团队对插槽（slot）的语法进行了简化和改进，引入了v-slot指令来替代原有的slot和slot-scope语法

6.1 默认插槽缩写（由不写变成v-slot）

父组件
<child-component><p>这是默认插槽的内容</p></child-component>

子组件
<template><slot></slot></template>

缩写后变成

父组件（推荐使用<template>标签，但也可直接用于元素上）
<child-component>
<template v-slot><p>这是默认插槽的内容</p></template>
</child-component>

或（注意：直接在元素上使用v-slot较少见，且可能需要额外配置）
<child-component>
<p v-slot></p>
</child-component>


子组件不变
<template><slot></slot></template>

6.2 具名插槽缩写（由slot变成 v-slot）

父组件
<child-component>
<template slot="header"><h1>这是头部内容</h1></template>
<template slot="footer"><p>这是底部内容</p></template>
</child-component>

子组件
<template>
<slot name="header"></slot>
<slot name="footer"></slot>
</template>

缩写后变成

父组件
<child-component>
<template v-slot:header><h1>这是头部内容</h1></template>
<template v-slot:footer><p>这是底部内容</p></template>
</child-component>

或简写
<child-component>
<template #header><h1>这是头部内容</h1></template>
<template #footer><p>这是底部内容</p></template>
</child-component>

子组件不变
<template>
<slot name="header"></slot>
<slot name="footer"></slot>
</template>

6.3 作用域插槽缩写（由slot变成 v-slot）

父组件
<child-component>
<template slot="item" slot-scope="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>

子组件
<template>
<slot name="item" :text="itemText"></slot>
</template>

缩写后变成

父组件
<child-component>
<template v-slot:item="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>

或简写
<child-component>
<template #item="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</child-component>

子组件不变
<template>
<slot name="item" :text="itemText"></slot>
</template>

（三）插槽中数据传递方式

通过 作用域插槽 实现
子组件中的插槽如何传递给父组件用

举例

<!-- 子组件中 将someFormObject这个对象作为form属性传递给插槽-->  
<slot name="form" :form="someFormObject">...</slot>


<!-- 父组件中 使用 slot-scope 属性 来接收form属性 -->  
<template slot="form" slot-scope="{ form }">


<!-- 2.6 版后缩写 语法为 v-slot:插槽名称="{ 属性名称}" -->  
<template v-slot:form="{ form }"> </template>

归纳

插槽是Vue.js中非常重要的一个概念，它允许父组件向子组件的模板中插入内容，从而实现组件内容的分发和组合。
通过默认插槽、具名插槽、作用域插槽、动态插槽名、插槽后备内容以及插槽的简写语法等用法，Vue.js提供了灵活且强大的组件化解决方案。这些用法不仅提高了组件的复用性和灵活性，还降低了组件之间的耦合度，使得Vue.js应用更加易于开发和维护。

在实际开发中，根据具体的需求和场景选择合适的插槽用法，可以构建出高效、可维护的Vue.js应用。

到此这篇关于Vue 中插槽(Slot)用法大全的文章就介绍到这了,更多相关vue 插槽slot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue自定义指令介绍(2)
这篇文章主要为大家详细介绍了Vue自定义指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
如何使用 Deepseek 写的uniapp油耗计算器
这篇文章主要介绍了如何使用 Deepseek 写的uniapp油耗计算器,下面是一个基于 Uniapp 的油耗计算器实现,包含 Vue 组件和页面代码,需要的朋友可以参考下
2025-04-04
vue 如何根据条件判断属性的添加和去除
这篇文章主要介绍了vue 如何根据条件判断属性的添加和去除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
前端Vue3+vant实现OSS上传图片全过程
这篇文章主要介绍了前端Vue3+vant实现OSS上传图片的相关资料,文中通过示例代码详细说明了上传文件的总流程,包括可能出现的跨域问题以及如何配置服务器以解决跨域问题,需要的朋友可以参考下
2025-05-05
浅谈Vue网络请求之interceptors实际应用
这篇文章主要介绍了浅谈Vue网络请求之interceptors实际应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
详解vue如何给特殊字段设置插槽
这篇文章主要为大家详细介绍了vue如何实现给特殊字段设置插槽,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
2023-09-09
Vue3 Vant组件库使用过程中的避坑点
本片文章主要写了，Vue3开发时运用Vant UI库的一些避坑点。让有问题的小伙伴可以快速了解是为什么。也是给自己做一个记录
2023-04-04
利用vue组件自定义v-model实现一个Tab组件方法示例
这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案
这篇文章主要介绍了vue项目element UI input框扫码枪扫描过快出现数据丢失问题,输入框要掉两个接口，根据第一个验证接口返回的code，弹不同的框，点击弹框确认再掉第二个接口，需要的朋友可以参考下
2022-12-12
VUE使用canvas绘制管线管廊实现思路
这篇文章主要为大家介绍了VUE使用canvas绘制管线管廊实现思路详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04