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 select当前value没有更新到vue对象属性的问题
今天小编就为大家分享一篇解决vue select当前value没有更新到vue对象属性的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue中使用clipboard实现复制功能
这篇文章主要介绍了Vue中结合clipboard实现复制功能 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue使用Axios做ajax请求详解
本篇文章主要介绍了vue使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue-router 起步步骤详解
这篇文章主要介绍了vue-router 起步步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
vue3组件库Shake抖动组件搭建过程详解
这篇文章主要为大家介绍了vue3组件库Shake抖动组件搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue中动态修改animation效果无效问题详情
这篇文章主要介绍了vue中动态修改animation效果无效问题详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-06-06
Vue点击切换颜色的方法
今天小编就为大家分享一篇Vue点击切换颜色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue如何清除浏览器历史栈
这篇文章主要介绍了vue如何清除浏览器历史栈，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue路由插件之vue-route
这篇文章主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
如何使用vue3+uni-app封装音乐播放插件
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
2023-11-11