vue具名插槽

最新推荐文章于 2024-09-09 09:21:31 发布

naziriteGtc

最新推荐文章于 2024-09-09 09:21:31 发布

阅读量172

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_40745468/article/details/129095415

版权

前端同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

vue

42 篇文章 0 订阅

订阅专栏

目标

核心功能分析：

PageTools 公共组件封装

Excel 导入导出功能

员工列表表格渲染

分页功能

讲解

分析

在后续的业务开发中，我们经常会用到一个类似下图的工具栏，因此需要可以将其封装成公共组件，方便复用

问：左侧的提示消息和右侧按钮在每个页面中并不是一致的，怎么处理呢？

答案

实现

创建组件实现基本结构，新建 src\components\PageTools\index.vue 文件,，实现页面结构的创建

<template>
  <el-card>
    <divclass="page-tools">
      <!-- 左侧 -->
      <divclass="left">
        <divclass="tips">
          <iclass="el-icon-info"/>
          <span>文字区域</span>
        </div>
      </div>

      <divclass="right">
        <!-- 右侧 -->
        按钮区域
      </div>
    </div>
  </el-card>
</template>

<script>
exportdefault {}
</script>

<stylelang="scss"scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tips {
    line-height: 34px;
    padding: 0px15px;
    border-radius: 5px;
    border: 1pxsolidrgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);

    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
</style>

定义左右两侧内容的具名插槽

我们定义了两个具名插槽，将来在使用组件的时候，只需要按照对应的插槽名称就可以在特定的位置插入内容

slot-left 左侧的文本区域

slot-right 右侧按钮区域

<template>
  <el-card>
    <divclass="page-tools">
      <!-- 左侧 -->
      <divclass="left">
        <divclass="tips">
          <iclass="el-icon-info"/>
          <slotname="slot-left">
            <span>文字区域</span>
          </slot>
        </div>
      </div>

      <divclass="right">
        <!-- 右侧 -->
        <slotname="slot-right">
          <span>按钮区域</span>
        </slot>
      </div>
    </div>
  </el-card>
</template>

在 src\views\employees\index.vue 组件中使用封装的 PageTools 组件

导入注册组件

使用组件的时候注入自定义内容

<template>
  <divclass="employees-container">
    <divclass="app-container">
      <!-- 通用工具栏组件使用 -->
      <page-tools>
        <!-- 自定义左侧内容 -->
        <template#slot-left>
          <span>共 19 条记录</span>
        </template>

        <!-- 自定义右侧内容 -->
        <template#slot-right>
          <el-buttontype="danger"size="small">导入excel</el-button>
          <el-buttontype="success"size="small">导出excel</el-button>
          <el-buttontype="primary"size="small">新增员工</el-button>
        </template>
      </page-tools>
    </div>
  </div>
</template>

<script>
// 导入组件
importPageToolsfrom'@/components/PageTools'

exportdefault {
  components: {
    PageTools// 导入自定义组件
  }
}
</script>

<stylelang="scss"scoped></style>