真实干货，走心分享！
如何做一个优秀的时间管理者？ lzx告诉我们，每天少睡几个小时，你就有更多的时间去做运动。
对于程序员来说，每天少点时间写业务，就有更多时间去做(hua)优(hua)化(shui)。
我们今天讲的是Vue中如何更灵活的封装业务组件，使效率翻倍。因为Ctrl + c加Ctrl + v都不足以满足我们了，搬过来还要改一大堆东西。那怎么办嘛，还有比CV工程师更快的职业吗？
答案是有的！我们称其为配置工程师，简单无脑！
Vue组件封装技巧
其实这个方法的核心思想就是封装。但是封装方式不同，使用起来也是天差地别。如何实现一个灵活易用的封装，这就是我们本篇文章的主要讨论目标。
$attrs
最简单的封装是什么？就是往原组件外再套一层，并且保留全组件的所有功能。然后扩展自己的功能。
真实案例
假设我们有一个组件x-button，很遗憾这个组件居然不支持加载状态！那咋办，为了用户体验，我们得给它加上加载状态才行。所以我们在它的基础上封装一个y-button：
<template>
<x-button>
<i v-if="loading" class="font-loading"></i>
<slot></slot>
</x-button>
</template>
export default {
name: 'YButton',
props: {
loading: {
type: Boolean,
default: false,
}
}
};
这样一来，我们的y-button就支持loading了！但是等等，如果我们要给原来的x-button传递属性咋办？简单!
<template>
<x-button :size="size">
<i v-if="loading" class="font-loading"></i>
<slot></slot>
</x-button>
</template>
export default {
props: {
loading: {
type: Boolean,
default: false,
},
size: {
type: String,
default: undefined,
}
}
};
对就是这么简单，原组件的属性，有一个加一个！
好累啊！！！我们不能这么做，这太不优雅了。好在Vue提供了$attrs可以解决这个问题。
那么$attrs是干哈的啊？
$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)
简单点来说也就是我不要的，全丢给你。那我们来改写一下。
<template>
<x-button v-bind="$attrs">
<i v-if="loading" class="font-loading"></i>
<slot></slot>
</x-button>
</template>
export default {
props: {
loading: {
type: Boolean,
default: false,
}
}
};
这样写，当我们传递属性给y-button时，除了loading以外，其他全部属性都会透传给x-button。这就是$attrs的作用。
配置+模板
这是本篇关键的一步，也是效率提升最多的一步。 想一想，当你对着原型图一步一步写出页面配置，页面就搭好了是什么感觉。
真实案例
日常我们用的最多，也是最常见的组件：表格+分页！讲真的，表格真的是无处不在！
优秀的表格组件有很多，但它们写起来的确很复杂，而且充斥着大量重复代码。是时候将它封装一下了！我们以el-table为基础组件。
ElTable原始操作
首先，el-table是这样用的：
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
}
]
};
}
};
列的配置化
现在我们开始改造这个组件，封装一个f-table！首先我们要将这些el-table-column都干掉。
<template>
<div>
<el-table>
<el-table-column v-for="(col, i) in cols" :key="i" v-bind="col"> </el-table-column>
</el-table>
</div>
</template>
export default {
props: {
cols: {
type: Array,
default: () => []
}
}
};
这样我们在使用的时候就是这样的：
<template>
<div>
<f-table cols=""></f-table>
</div>
</template>
export default {
data() {
return {
cols: [
{
prop: "date",
label: "日期",
width: "180",
formatter: dateFormatter
}
]
};
}
};
数据获取方式
我们通过最原始的调用知道el-table是通过
<el-table :data="tableData">
data属性来传递数据的。我们只要直接透传数据数组就好了，但是我们不这样做，因为这里我们可以做更多。我们不直接传入数据，而是传入获取数据的方法。
<template>
<div>
<el-table :data="tableData">
<!-- ... -->
</el-table>
</div>
</template>
export default {
props: {
// ...
fetch: {
type: Function,
default: () => Promise.resolve({ rows: [] })
}
},
data() {
return {
loading: false,
tableData: []
};
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
this.loading = true;
try {
const { rows } = await this.fetch();
this.tableData = rows;
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
}
}！
};
你可以看到我们在获取数据的时候可以设置表格的加载状态，处理错误。这里我们还可以将分页集成进去，不过这个后面再讲。这可以省去我们很多工作！
我们再来看看组件调用代码：
<template>
<div>
<f-table :cols="cols" :fetch="fetchUsers"></f-table>
</div>
</template>
export default {
data() {
return {
cols: [
{
prop: "date",
label: "日期",
width: "180"
}
]
};
},
methods: {
fetchUsers() {
return {
rows: [{ name: "xxx", date: "xx" }]
};
}
}
};
我们只需要关心怎么获取数据，要展示什么数据。没了！
分页
OK！下面我们顺带解决分页问题，我们使用的是el-pagination。
ElPagination原始操作
<template>
<div>
<el-pagination :current-page.sync="currentPage" :total="total"> </el-pagination>
</div>
</template>
export default {
data() {
return {
currentPage: 1,
total: 0
};
}
};
整合到FTable
<template>
<div>
<el-table :data="tableData">
<!-- -->
</el-table>
<el-pagination @current-change="fetchData" :current-page.sync="currentPage" :total="total">
</el-pagination>
</div>
</template>
export default {
// ...
data() {
return {
// ...
currentPage: 1,
total: 0
};
},
methods: {
async fetchData() {
// ...
const { rows, total } = await this.fetch(this.currentPage);
this.tableData = rows;
this.total = total;
}
}
};
我们看一下我们加了哪些东西：
- 在
fetch的时候多返回了total表明总数据，以便于分页 - 在
fetch的时候向函数中传入了当前页码 - 在页码改变的时候重新获取数据
而我们的组件调用代码，仅仅只增加了几行：
<f-table :cols="cols" :fetch="fetchUsers"></f-table>
methods: {
async fetchUsers(currentPage) {
const query = {
page: currentPage
};
const { rows, total } = await api.getUsers(query);
return { rows, total };
}
}
这样，一个带有自动分页的表格组件就封装好了，使用起来十分简单。
当然这并不能满足你的所有需求我知道。比如你想要使用表格最原始的el-table-column，给表格列加个按钮，加个输入框什么的。
具名slot
要定制内容的时候，使用slot是最合适的。但是如何加在我们的f-table里面呢？
还记得我们使用cols来配置el-table-column。我们只需要表明某个col是某个slot就好了。
<template>
<div>
<el-table :data="tableData">
<template v-for="(col, i) in cols">
<slot v-if="col.slot" :name="col.slot" />
<el-table-column v-else :key="i" v-bind="col"> </el-table-column>
</template>
</el-table>
</div>
</template>
使用方法：
<template>
<div>
<f-table :cols="cols" :fetch="fetchUsers">
<template slot="action">
<el-table-column>使用原生ElTableColumn的用法</el-table-column>
</template>
</f-table>
</div>
</template>
export default {
data() {
return {
cols: [
{
slot: 'operation'
},
{
prop: "date",
label: "日期",
width: "180"
}
]
};
}
}
小结
一旦习惯这种方法，再配上各种formatter，写页面真的无脑，就差改成拖拽了（有没有嗅到什么）！
写作不易，恳求大家动动手指点个关注点个赞！
