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

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

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

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

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

js

复制代码

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的属性传入到子组件当中。进行展示，

js

复制代码

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

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

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

父组件

js

复制代码

<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（选择每页大小数组）

子组件

js

复制代码

<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） 更新父组件中的值，实现双向的数据绑定