Vue3中插槽slot的使用方法详解

更新时间：2024年11月27日 11:33:05 作者：不懂得小白

在Vue 3中,插槽（slot）是一种强大的内容分发API,它允许组件的模板开发者定义一种插槽,下面就跟随小编一起来学习一下它的具体使用吧

在Vue 3中，插槽（slot）是一种强大的内容分发API，它允许组件的模板开发者定义一种插槽，让父组件的模板内容能够插入到子组件的视图结构中的指定位置。这种机制使得组件的复用性和灵活性得到了极大的提升。以下是使用Vue 3插槽的几个主要原因：

内容分发：

插槽允许子组件定义一个或多个插槽位置，而父组件则可以将自己的内容插入到这些位置中。这使得父组件能够定制子组件的某些部分，同时保留子组件的其余结构和功能。

组件复用：

通过插槽，你可以创建高度可复用的组件，这些组件可以在不同的上下文中使用，并且能够根据不同的需求展示不同的内容。这减少了重复代码，提高了开发效率。

灵活性和可扩展性：

插槽提供了灵活的布局选项，使得开发者能够根据需要轻松地调整组件的显示方式。此外，通过定义具名插槽和作用域插槽，你可以进一步控制插槽的内容和行为，从而实现更复杂的组件交互。

维护性：

使用插槽可以将组件的逻辑和显示内容分离，使得组件的维护变得更加容易。当你需要修改组件的显示方式时，只需要在父组件中调整插槽的内容即可，而无需修改子组件的代码。

Vue 3的改进：

Vue 3对插槽API进行了改进，引入了<script setup>语法糖，使得插槽的使用更加简洁和直观。此外，Vue 3还支持了动态插槽名和插槽内容分发，进一步增强了插槽的灵活性和功能。

社区支持和生态系统：

Vue作为一个流行的前端框架，拥有庞大的社区支持和丰富的生态系统。使用Vue 3插槽可以让你利用这些资源，快速构建高质量的Web应用程序。

在Vue 3中，插槽(slot)的使用方法主要有以下几种

默认插槽
具名插槽
动态插槽名
作用域插槽

1. 默认插槽

默认插槽：是最基本的插槽类型，它没有名称，用于接收父组件传递的未明确指定插槽名称的内容

1. 子组件 ChildComponent.vue

<template>
  <div>
    <h2>我是默认插槽（子组件）</h2>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

2. 父组件 ParentComponent.vue

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <p>这是默认插槽的内容</p>
    </ChildComponent>
  </div>
</template>
 
<script setup>
 
import ChildComponent from './ChildComponent.vue';
 
</script>

2. 具名插槽

具名插槽：允许在子组件中定义多个插槽，每个插槽都有一个唯一的名称。父组件可以通过指定插槽的名称来将内容插入到对应的插槽中

1. 子组件 ChildComponent.vue

<template>
  <div>
    <h2>ChildComponent</h2>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

2. 父组件 ParentComponent.vue

<template>
  <div>
  <h1>ParentComponent</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>具名插槽1</h3>
      </template>
      <p>默认插槽.</p>
      <template v-slot:footer>
        <p>具名插槽2</p>
      </template>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

运行结果

3. 动态插槽名

动态插槽名：允许父组件根据条件动态地选择将内容插入到哪个插槽中。

1. 子组件 ChildComponent.vue

<template>
  <div>
    <h2>ChildComponent</h2>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

2. 父组件 ParentComponent.vue

<template>
  <div>
    <h1>ParentComponent</h1>
    <ChildComponent>
      <template v-slot:[dynamicSlotName]>
        <p>动态插槽名.</p>
      </template>
      <template v-slot:footer>
        <p>动态插槽名</p>
      </template>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
 
import {ref} from "vue";
let dynamicSlotName  = ref('header') // 可以根据条件动态改变这个值
 
 
</script>

动态插槽名在<script setup>中不太常见，因为通常动态逻辑会在模板中处理

但如果你确实需要在<script setup>中处理动态插槽名，你可以考虑在模板中使用计算属性或方法来动态生成插槽名。不过由于Vue模板语法的限制，直接在模板中动态绑定插槽名可能不太直观通常会在模板中直接使用条件渲染来模拟这种效果。

4. 作用域插槽

作用域插槽：允许子组件向父组件传递数据，父组件可以使用这些数据来渲染插槽内容。

1. 子组件 ChildComponent.vue

<template>
  <div>
    <h2>作用域插槽（子组件）</h2>
    <slot :user="user"></slot> <!-- 作用域插槽 -->
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const user = ref({
  name: '张三',
  age: 100
});
</script>

2. 父组件 ParentComponent.vue

<template>
  <div>
    <h1>Parent Component</h1>
 
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>用户名: {{ slotProps.user.name }}</p>
        <p>年龄: {{ slotProps.user.age }}</p>
      </template>
    </ChildComponent>
 
   <!-- 使用解构的方式简洁易读 -->
    <ChildComponent v-slot:default="{ user }">
      <p>用户名: {{ user.name }}</p>
      <p>年龄: {{ user.age }}</p>
    </ChildComponent>
 
 
    <!-- 或者更简洁地，省略插槽名（在模板中直接写内容） -->
    <ChildComponent v-slot="{ user }">
      <p>用户名: {{ user.name }}</p>
      <p>年龄: {{ user.age }}</p>
    </ChildComponent>
  </div>
</template>
 
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

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

您可能感兴趣的文章:

Vue微信公众号网页分享的示例代码
这篇文章主要介绍了Vue微信公众号网页分享的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
安装vue3开发者工具但控制台没有显示出vue选项的解决
这篇文章主要介绍了安装vue3开发者工具但控制台没有显示出vue选项的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3利用keepAlive缓存页面实例详解
<keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下
2022-11-11
一文详解Vue3中使用ref获取元素节点
这篇文章主要介绍了一文详解Vue3中使用ref获取元素节点，本文介绍在vue3的setup中使用composition API获取元素节点的几种方法，需要的朋友可以参考一下
2022-07-07
vue使用过滤器格式化日期
这篇文章主要为大家详细介绍了vue使用过滤器格式化日期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
Vue2.x 的双向绑定原理及实现
这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容
2021-09-09
vue 路由跳转打开新窗口被浏览器拦截问题处理
这篇文章主要介绍了vue 路由跳转打开新窗口被浏览器拦截问题处理，下面文章操作中所遇到相关问题解决的内容介绍详细，需要的小伙伴可以参考一下
2022-03-03
前端实现Vue组件页面跳转的多种方式小结
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
2024-02-02
unplugin-auto-import与unplugin-vue-components安装问题解析
这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
原生echart和vue-echart的使用详解
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02