VUE插槽妙用助力高效开发

2023-10-04 19:24:48

VUE 插槽是一种允许组件嵌套其他组件并在其中插入自定义内容的机制。插槽可以帮助您创建可重复使用的组件，并在不同的组件中插入不同的内容。

1. 插槽用法

1.1 定义插槽

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在上面的代码中，我们定义了一个名为 Layout 的组件，它具有三个插槽：header、default 和 footer。

1.2 使用插槽

<template>
  <Layout>
    <template v-slot:header>
      <h1>标题</h1>
    </template>
    <template v-slot:default>
      <p>正文</p>
    </template>
    <template v-slot:footer>
      <p>页脚</p>
    </template>
  </Layout>
</template>

在上面的代码中，我们使用 Layout 组件并为其三个插槽提供了内容。

2. 插槽使用场景

插槽在实际开发中有很多使用场景，例如：

创建可重复使用的组件
实现组件化开发
提高代码复用率
灵活布局页面内容

3. 插槽案例

3.1 面包屑导航

面包屑导航是一种显示用户当前位置的导航栏。我们可以使用插槽来创建可重复使用的面包屑导航组件。

<template>
  <div class="breadcrumb">
    <slot></slot>
  </div>
</template>

<template>
  <Breadcrumb>
    <a href="/">首页</a>
    <a href="/products">产品</a>
    <a href="/products/1">产品详情</a>
  </Breadcrumb>
</template>

3.2 表格

表格是一种在网页中显示数据的组件。我们可以使用插槽来创建可重复使用的表格组件。

<template>
  <table class="table">
    <thead>
      <slot name="header"></slot>
    </thead>
    <tbody>
      <slot></slot>
    </tbody>
  </table>
</template>

<template>
  <Table>
    <template v-slot:header>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </template>
    <template v-slot:default>
      <tr>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>女</td>
      </tr>
    </template>
  </Table>
</template>