Vue 插槽（1）

ZHB_Sunday

已于 2024-03-18 17:41:30 修改

阅读量381

点赞数 9

分类专栏：前端学习笔记文章标签： vue.js 前端 javascript

于 2024-03-18 17:15:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45608414/article/details/136814827

版权

前端学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js中插槽的两种类型：默认插槽和具名插槽。默认插槽适用于需要复用组件并定制部分内容的情况；具名插槽则用于明确指定插入内容的位置。通过实例展示了如何在子组件和父组件间使用这些插槽进行内容定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、插槽的分类

默认插槽
具名插槽（作用域插槽算是一种用法，不算是插槽的一种类型）

二、如何使用？

1、默认插槽：

经常复用的组件，并且需要再使用时对子组件内部一些内容需要定制，这时候可以在子组件内使用 <slot> 标签来占位，在父组件中的子组件标签内插入内容。

2、具名插槽：

当组件内部多处需要定制时，使用默认插槽已经不能满足我们的需求，因为多出使用插槽占位，Vue并不知道将我们插入的内容渲染在哪里，所以就需要使用具名插槽。

子组件定义插槽：

<template>  
  <div>  
    <slot name="header"></slot>  
    <p>这是主体内容</p>  
    <slot name="footer"></slot>  
  </div>  
</template>

父组件使用：

在父组件中，你可以使用<template>元素并为其添加v-slot指令（或简写为#）来指定要插入哪个具名插槽。

//举例：

<template>  
  <ChildComponent>  
    <template v-slot:header>  
      <h1>这是标题</h1>  
    </template>  
    <template #footer>  
      <p>这是页脚</p>  
    </template>  
  </ChildComponent>  
</template>