在Vue中如何理解插槽Slot

最新推荐文章于 2025-05-28 18:24:38 发布

外下羊.

最新推荐文章于 2025-05-28 18:24:38 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Rick_and_mode/article/details/108954078

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue中的slot插槽功能，展示了如何通过匿名插槽和具名插槽进行父子组件间的参数传递，并强调了其在组件复用和模块化设计中的优势。

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

前几天因为在练习React 所以耽搁了博客的更新
这几天又回顾了Vue的各种属性的用法我发现一个跟
父子传值差不多的属性 slot 插槽属性
在vue的官方文档中

solt是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参

可以利用slot属性进行传递
通俗的理解就是
就是在组件模板中使用slot定义一个位置
在通过slot的属性进行匹配
替换组件模板中的位置

我给大家举一个例子

在App.vue 里面引入Slot.vue 子组件

<template>
  <div>
    <router-view />
    <!-- 组件中传递 -->
    <Slot>
      <slot>来自父组件的Hello!word</slot>
    </Slot>
  </div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot 页面 展示利用插槽slot进行传值
export default {
  components: {
    Slot,
  },
  data() {
    return {};
  },
};
</script>

在Slot.vue中

<template>
  <div>
    <slot></slot>
  </div>
</template>

这是利用匿名插槽来进行传递
在这里插入图片描述

匿名插槽

可以让组件模块化更清晰，同时复用性更高，不至于，我要一杯茶，我就要定义一个组件，我要一杯牛奶我又定义一个组件，有了插槽，我只需要定义一个杯子，要喝什么由使用的传人决定。

上述代码也叫匿名插槽，就是默认把模板全部渲染到solt中，如果需要指定渲染，就需要使用具名插槽,简单说就是起一个名字，告诉他小红该坐那儿，小明该坐那儿

具名插槽

<template>
  <div>
    <router-view />
    <Slot>
        <!-- 组件中传递 -->
      <!-- 替换子组件匿名插槽 -->
      <slot name="title"></slot>
    </Slot>
  </div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot页面 展示利用插槽slot进行传值
export default {
  components: {
    Slot,
  },
  data() {
    return {};
  },
};
</script>

<template>
  <div>
    <slot name="title">来子组件的Hello!word</slot>
    <!-- 利用具名插槽的name属性来匹配 -->
  </div>
</template>

<script>

</script>

在这里插入图片描述

元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

（具名插槽）组件中有多个命名的slot 插槽时，可以实现父组件对子组件的指定位置显示内容或传参