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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Cookbook组件形式：优化 Vue 组件的运行时性能
本文仿照Vue Cookbook 组织形式，对优化 Vue 组件的运行时性能进行阐述。通过基本的示例代码给大家讲解，需要的朋友参考下
2018-11-11
vue实现原生下拉刷新
这篇文章主要为大家详细介绍了vue实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vsCode一键生成vue模板
之前关于vsCode一键生成vue模，最近需要回顾，就顺便发到随笔上了，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue 实现在函数中触发路由跳转的示例
今天小编就为大家分享一篇vue 实现在函数中触发路由跳转的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue的axios和mock.js你了解吗
这篇文章主要为大家详细介绍了vue的axios和mock.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue项目中使用vue-layer弹框插件的方法
这篇文章主要介绍了vue项目中使用vue-layer弹框插件的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
vue通过定时器实现垂直滚动公告
这篇文章主要为大家详细介绍了vue通过定时器实现垂直滚动公告，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
解决vue终端报错:不是内部或外部命令
最近学习一下前端框架Vue,整体上感觉还是比较有意思的,但是在安装vue-cli脚手架的时候,出现了一些问题,解决问题也花费了不少时间,下面这篇文章主要给大家介绍了关于解决vue终端报错:不是内部或外部命令的相关资料,需要的朋友可以参考下
2023-02-02
Vue.js中安装一个路由器demo
这篇文章主要为大家介绍了Vue.js中安装一个路由器demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
elementPlus 的el-select在提示框关闭时自动弹出的问题解决
这篇文章主要介绍了elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的问题,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧
2024-01-01