vue3 slot的定义与使用

最新推荐文章于 2025-04-17 06:00:00 发布

可爱的秋秋啊

最新推荐文章于 2025-04-17 06:00:00 发布

阅读量2.4k

点赞数 28

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/mq1314520_zhl/article/details/135910241

版权

前端专栏收录该内容

17 篇文章

订阅专栏

在Vue3中，slot（插槽）被重构为更直观和强大的机制。具体定义和使用方式如下：

定义插槽：在组件的模板中，使用<slot></slot>标签来定义插槽。可以给插槽设置名字，以便在父组件中使用。

<template>
  <div>
    <h2>子组件</h2>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot> <!-- 命名插槽 -->
  </div>
</template>

使用插槽：在父组件中，使用<template v-slot:插槽名>或<template #插槽名>的形式来使用插槽。

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <!-- 默认插槽 -->
      <template v-slot:default>
        <p>这是默认插槽的内容</p>
      </template>

      <!-- 命名插槽 -->
      <template v-slot:footer>
        <p>这是命名插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

可以使用<template>标签来包裹插槽的内容，这样可以使用复杂的模板和逻辑。

Vue3还提供了一种更简洁的语法糖来使用插槽，使用#符号来替代v-slot:。

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <!-- 默认插槽 -->
      <template #default>
        <p>这是默认插槽的内容</p>
      </template>

      <!-- 命名插槽 -->
      <template #footer>
        <p>这是命名插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

以上就是Vue3中slot的定义与使用方式。通过插槽，我们可以在子组件中预留一些空位，让父组件可以动态地传入内容，实现组件之间的灵活交互和复用。

匿名插槽

1.1 什么是插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

1.2 体验插槽的基础用法

在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例代码如下：

<template>
    <p>这是 MiCom1 组件的第1个p标签</p>
    <!--通过 slot标签，为用户预留内容占位符（插槽）-->
    <slot></slot>
    <p>这是MiCom1组件最后一个p 标签</p>
</template>

<mi-com-1>
    <!--在使用 MiCom1组件时，为插槽指定具体的内容-->
    <p>~~~用户自定义的内容~~~</p>
</ mi-com-1>

1.3 没有预留插槽的内容会被丢弃

如果在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：

<template>
    <p>这是MiCom1组件的第1 个p标签</p>
    <!--封装组件时吗，没有预留任何插槽-->
    <p>这是MiCom1组件最后一个p标签</p>
</template>

<mi-com-1>
    <!--自定义的内容会被丢弃-->
    <p>~~~用户自定义的内容~~~</p>
</mi-com-1>

1.4 后备内容

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：

<template>
    <p>这是MiCom1 组件的第1个p标签</p>
        <slot>这是后备内容</slot>
    <p>这是MiCom1组件最后一个p标签</p>
</template>

2、具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下：

<div class="container">
    <header>
        <!--我们希望把页头放这里--><slot name="header">
        <lslot></header>
    <main>
        <!--我们希望把主要内容放这里-->
        <slot></slot>
    </main>
    <footer>
    <!--我们希望把页脚放这里-->
        <slot name="footer"></slot>
    </footer>
</div>

2.1 为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。示例代码如下：

<mi-com-2>
    <template v-slot:header>
        <h1>绝句</h1>
    </template>
    <template v-slot: default>
        <p>千里黄云白日曛</p>
        <p>北风吹雁雪纷纷</p>
        <p>莫愁前路无知己</p>
        <p>天下谁人不晓君</p>
    </template>
    <template v-slot:footer>
        <p>落款:杜甫</p>
    </template>
</mi-com-2>

2.2 具名插槽的简写形式

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header

<mi-com-2>
    <template #header>
        <h1>绝句</h1>
    </template>
    <template t#default>
        <p>千里黄云白日曛</p>
        <p>北风吹雁雪纷纷</p>
        <p>莫愁前路无知己</p>
        <p>天下谁人不晓君</p>
    </template>
    <template #footer>
        <p>落款:杜甫</p>
    </template>
</mi-com-2>

3、作用域插槽

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种带有 props 数据的 <slot> 叫做“作用域插槽”。示例代码如下：

<div>
    <h3>这是TEST 组件</h3>
    <slot :info="infomation"></slot>
</div>

<↓--使用自定义组件-->
<mi-test>
    <template v-slot:default="scope">{{scope }}</template>
</mi-test>

3.1 解构作用域插槽的 Prop

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：

<mi-table>
    <!-- v-slot:可以简写成# -->
    <!--作用域插槽对外提供的数据对象，可以通过“解构赋值"简化接收的过程-->
    <template #default="{ user }">
        <!--【使用】作用域插槽的数据-->
        <td>{i user.id }</td>
        <td>{i user.name }</td>
        <td>f{ user.state }</td>
    </template>
</mi-table>

3.2 声明作用域插槽

在封装 MyTable 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。示例代码如下：

<!--表格主体区域-->
<tbody>
    <!--循环渲染表格数据-->
    <tr v-for="item in list" :key="item.id">
        <!--下面的 slot 是一个【作用域插槽】-->
        <slot :user="item"></slot>
    </tr>
</tbody>

3.3 使用作用域插槽

在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。示例代码如下：

<!--使用自定义组件-->
<mi-table>
    <!--【接收】作用域插槽对外提供的数据-->
    <template v-slot:default="scope">
    <!--【使用】作用域插槽的数据-->
        <td>ii scope.user.id }}</td>
        <td>f{ scope.user.name }}</td>
        <td>i{ scope.user.state }}</td>
    </template>
</mi-table>