前端项目公共组件封装思想（Vue）

作者：安静的搬砖人

1. 通用组件（表单搜索 + 表格展示 + 分页器）

在项目当中我们总会遇到这样的页面：页面顶部是一个表单筛选项，下面是一个表格展示数据。表格下方是一个分页器，这样的页面在我们的后台管理系统中经常所遇到，有时候可能不止一个页面，好几个页面的结构都是这种。

本人记得，在 react 中的高级组件库中有这么一个组件，就实现了这么一个效果。就拿这个页面来说我们实现一下组件封装的思想：1. 首先把每个页面的公共部分抽出来，比如标题等，用 props 或者插槽的形式传入到组件中进行展示 2. 可以里面数据的双向绑定实现跟新的效果 3. 设置自定义函数传递给父组件要做上面事情

1. 将公共的部分抽离出来

TableContainer组件
<template>
    <div class="container">
      <slot name="navbar"></slot>
      <div class="box-detail">
        <div class="detail-box">
          <div class="box-left">
            <div class="left-bottom">
              <div class="title-bottom">{{ title }}</div>
              <div class="note">  
                <div class="note-detail">
                  <slot name="table"></slot>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-backtop style="width: 3.75rem; height: 3.75rem" :bottom="10" :right="5">
        <div
          style="
             {
              width: 5.75rem;
              flex-shrink: 0;
              border-radius: 2.38rem;
              background: #fff;
              box-shadow: 0 0.19rem 1rem 0 #2b4aff14;
            }
          "
        >
          <i class="el-icon-arrow-up" style="color: #6e6f74"></i>
        </div>
      </el-backtop>
    </div>
  </template>

这里的话利用了具名插槽插入了 navbar、table 组件，title 通过 props 的属性传入到子组件当中。进行展示，

父组件
    <TableContainer title="资源审核">
        <template v-slot:navbar>
            <my-affix :offset="0">
                <Navbar/>
            </my-affix>
        </template>
        <template v-slot:table>
            <SourceAuditTable/>
        </template>
    </TableContainer>

当然这是一个非常非常简单的组件封装案例

接下来我们看一个高级一点的组件封装

父组件

<template>
  <div>
    <hr>
    <HelloWorld :page.sync="page" :limit.sync="limit" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  data() {
    return {
      page: 1,
      limit: 5
    }
  },
  components: {
    HelloWorld
  },


}
</script>

父组件传递给子组件各种必要的属性：total（总共多少条数据）、page (当前多少页)、limit（每页多少条数据）、pageSizes（选择每页大小数组）

子组件

<template>
  <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :total="20" />
</template>

<script>
export default {
  name: 'HelloWorld',

  props: {
    page: {
      default: 1
    },
    limit: {
      default: 5
    },
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        //currentPage 这里对currentPage做出来改变就会走这里
        //这边更新数据走这里
        console.log('currentPage', this.currentPage)
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

这里的 page.sync、limit.sync 目的就是为了实现数据的双向绑定，computed 中监听 page 和 limit 的变化，子组件接收的数据通过 computed 生成的 currentPage 通过 sync 绑定到了 el-pagination 中， 点击分页器的时候会改变 currentPage 此时会调用 set 函数设置新的值，通过代码 this.$emit（update:page,value） 更新父组件中的值，实现双向的数据绑定

本文是作者在闲暇的时间随便记录一下， 若有错误请指正，多多包涵。感谢支持（顺便吆喝一声，技术大厂内推，前后端测试捞人）！