共计 4436 个字符，预计需要花费 12 分钟才能阅读完成。
什么是组件化
组件化是一种思维，就是拆分的意思，艰深而言，就是大而化小（没有小而化了）、方便管理。比方咱们中国地大物博，人口众多不好治理，所以就拆分成许多省、直辖市、自治区，方便管理。写代码也是一样，如果一个文件写了几万行代码，就会耦合太重大，拆分开来，方便管理。
然而组件化不能过渡应用，不能为了组件化而组件化。正当应用，才为上策
组件化和模块化的区别
- 组件化 -ui 视图层面的拆分
以 vue 为例，一个页面有头部、内容区、底部。能够拆分开来，这里的拆分个别都会带着款式 css，所以称之为 UI 视图层面的拆分（当然也会蕴含 js 的相干逻辑） - 模块化 -js 层面的拆分
模块化的拆分次要是 js 逻辑层面的拆分，二者相似，但不同
组件的分类
- 独立拆分的组件
比方咱们把一个页面的头部、内容区、底部别离拆分成三个独立的组件 -
公共复用的组件
比方在很多的路由页面里，都须要应用到一个弹框、或者应用到一个表格。咱们能够封装一个弹框或者封装一个表格，哪里须要引哪里，不同页面的弹框或表格数据不一样，咱们能够通过给封装的公共组件传递不同的数据，使其展示不同。其实一个.vue 文件就是一个组件，只不过是页面级别的组件罢了
独立拆分的组件之拆分步骤
第一步 组件拆分
原本都写在一个文件中的内容，比方一个.vue 文件的构造中包含头部、底部、内容区。咱们把头部的 html、css、js 的内容，独自拎进去成为一个新的.vue 文件。当然底部、和内容区的也同样独自拎进去。独自拎进去的就放在 components 文件夹下吧
第二步 组件引入
import dialogMask from "./components/dialog";第三步 组件注册
// 是 components 不是 component，要加个 s，因为组件可能要注册多个
export default {
// ...
components: {dialogMask,},
}第四步 组件应用
<div class="dialog">
<dialog-mask></dialog-mask>
</div>公共复用的组件之拆分步骤
复用组件的拆分步骤，最初 el-table 组件的二次封装会解说，诸位看官且持续往下看。这里先按下不表。
说道组件的封装，就要与数据传递打交道，所以这里简略说一下 vue 组件间的数据传递，又因为封装组件大多数的数据传递是以父子组件的传递为主，所以这里提一下 vue 父子组件间的数据传递。
父子组件间的数据传递之两种形式
形式一（v-bind 加 v -on）
父传子
- 父组件 v -bind 绑定本人 data 中数据传递给子组件
-
子组件通过 props 接管到在页面中应用
步骤图如下：子传父
- 子组件通过 this.$emit(‘eventName’,’ 参数 ’)触发父组件中的办法
-
父组件要提前在组件上通过 v -on 裸露给子组件以便调用
步骤图如下：形式二（应用 ref 取值赋值）
父传子或子传父
-
第一步，给子组件打一个 ref，就能够看到子组件所有的货色，感兴趣的敌人能够打印一下 this.$refs.dialogRef 后果高深莫测。
<dialogMask ref="dialogRef"></dialogMask> -
第二步，在父组件中把父组件的数据赋给子组件（父传子）
this.$refs.dialogRef. 子组件的数据 = this. 父组件的数据 -
第三步，在子组件中间接取到拿到子组件的数据赋给父组件
this. 父组件的数据 = this.$refs.dialogRef. 子组件的数据
父子组件的办法的互相调用
就记住罕用的形式吧
- 父组件调用子组件的办法, 应用 ref
this.$refs.xxx.childMethods() - 子组件调用父组件的办法，应用 this.$emit(‘eventName’,’ 参数 ’)
this.$emit('eventName','参数')
饿了么 UI 中的 el-table 组件的二次封装
饿了么 UI 的组件是饿了么团队基于 vue 封装的，外面有很多罕用的组件，不便咱们疾速开发我的项目。不过假如咱们的我的项目中的很多页面都有表格出现，表格的构造差不多，就是数据不一样，如果我么每个页面都去写 el-table 一大堆的话，就会比拟麻烦，倒不如本人封装一个公共的 table 组件，那个页面用 table 的话，那个页面就引进来，传参即可。
第一步，新建组件，注册并在 main.js 引入
流程图如下：
至此，咱们自定义的封装的 myTable 组件曾经注册好了，那个页面须要用，就在那个页面去引入，传对应的参数即可
第二步，依据需要思考传参
咱们先看一下效果图：
需要如下：
- 复选框列和序号列可管制是否展现
- 表头数据动静展现
- 表内容数据也动静展现
理论我的项目中咱们要发申请获取表的数据和表内容数据，这里的话，咱们就模仿一下数据即可
封装的 myTable 组件代码
<template>
<div class="box">
<el-table
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<!-- 复选框列
复选框列和索引列因为有的显示有的不显示，所以咱们应用一个 v -if 去管制它，v-if 的标识取决于父组件（援用这个组件的组件）传递过去的标识。子组件也就是
咱们封装的这个 myTable 组件用 props 接管一下又因为复选框要有勾选工夫所以
@select-change 事件不能落下
-->
<el-table-column
v-if="isShowCheckbox == true"
type="selection"
width="48"
fixed
></el-table-column>
<!-- 索引列 -->
<el-table-column
v-if="isShowIndex == true"
label="序号"
type="index"
width="50"
fixed
>
</el-table-column>
<!-- 主内容列
主内容列的表头就是 label，表头列对应的数据就是 prop，所以父组件能够传递过去
一个数组，外面的每一项就是 label 的名字和 prop 对应的值。通过 v -for 就动静了
-->
<el-table-column
:prop="item.propName"
:label="item.labelName"
v-for="(item, index) in tableHeaderTitle"
:key="index"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "myTable",
props: {
// 父组件传递过去的表头的数组数据
tableHeaderTitle: {
type: Array,
default: [],},
// 父组件传递过去的表内容的数组数据
// 留神：表头内容数据和表内容数据有关联的
tableData: {
type: Array,
default: [],},
// 父组件传递过去的是否展现复选框列的标识
isShowCheckbox: {
type: Boolean,
default: false,
},
// 父组件传递过去的是否展现序号索引列的标识
isShowIndex: {
type: Boolean,
default: false,
},
},
methods: {
// 勾选当前，要把勾选的这一行的数据传递给父组件，以供应用
handleSelectionChange(checked) {this.$emit("receiveCheckedData", checked);
},
},
};
</script>援用 myTable 组件的父组件代码
<template>
<div id="app">
<!-- 因为之前曾经 vue 全局注册了本人封装的组件，所以这里不须要在引入这个组件了
能够间接用即可 -->
<my-table
:tableHeaderTitle="tableHeaderTitle"
:tableData="tableData"
:isShowCheckbox="isShowCheckbox"
:isShowIndex="isShowIndex"
@receiveCheckedData="receiveCheckedData"
></my-table>
</div>
</template>
<script>
export default {data() {
return {
// 模仿表头数据，理论要发申请获取的
tableHeaderTitle: [
{
propName: "name",
labelName: "姓名",
},
{
propName: "age",
labelName: "年龄",
},
{
propName: "gender",
labelName: "性别",
},
{
propName: "height",
labelName: "身高",
},
{
propName: "weight",
labelName: "体重",
},
{
propName: "like",
labelName: "喜好",
},
{
propName: "address",
labelName: "住址",
},
],
// 模仿表内容数据
tableData: [
{
id:"11111",
name: "孙悟空",
age: 500,
gender: "男",
height: "七尺男儿",
weight: "三百吨",
like: "桃子",
address: "花果山水帘洞",
},
{
id:"22222",
name: "猪八戒",
age: 88,
gender: "男",
height: "七尺男儿",
weight: "八百吨",
like: "肉包子",
address: "高老庄",
},
{
id:"33333",
name: "沙和尚",
age: 1000,
gender: "男",
height: "七尺男儿",
weight: "三百吨",
like: "鱼",
address: "通天河",
},
],
// 是否展现复选框列
isShowCheckbox:true,
// 是否展现序号索引列
isShowIndex:true,
};
},
methods: {
// 接管子组件勾选的行的数据
receiveCheckedData(checked){console.log('checked',checked);
}
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding: 50px;
}
</style>
在理论状况中，须要依据产品的需要，去做出对应的封装。组件封装肯定要灵便
补充（看饿了么组件的播种）
咱们关上 node_modules 文件夹下，外面有很多的依赖包（库），咱们找到 element-ui 的这个文件夹，外面的 packages 文件夹寄存的就是饿了么团队封装好的组件。如下图：
没事看看也挺好，也能学到不少的货色
** 小伙伴们如果感觉文章写的还勉强对付能看，给激励一下点个赞呗。感激哦 **
