vue的组件化的理解之单独拆分的组件&组件的封装（以el-table组件的二次封装举例）-六虎

什么是组件化

组件化是一种思维，便是拆分的意思，粗浅而言，便是大而化小（没有小而化了）、便利处理。比如咱们我国地大物博，人口众多欠好处理，产品设计所以就拆分红许多省、直辖市、自治区，便利处理。写代码也是相同，假定一个文件html文件怎样翻开写了几万行代码，就会耦合太严峻html网页制造，拆分开来，便利处理。

但是组件化不能过渡运用，不能为了组件化而组件化。合理运用，才为上策

组件化和模块产品化的差异

组件化-ui视图层面的拆分

组数组指针件化-ui视图层面的拆分,以vue为例，一个页面有头部、内容区、底部。可以拆分开来，这儿的拆分一般都会带着样式css，所以称之为UI视图层面的拆分（当然也会包括js的相关逻辑）

模块化-js层面的拆分

模块化的拆分主要是js逻辑层面的html5拆分，二者类似，但不同

组件的分类

独立拆分的组件

比如咱们把一个页面的头部、内容区、超崇高骑士app设备下载底部别离拆分红三个仓鼠寿数独立的组件

公共复用的组件

比如在许多的路由页面里，都html5需求运用到一个弹框、数组或许运用超神兽宠店CSS到一个表格。咱们可以封装一个弹框或超崇高骑士许封装一个表格，哪里需求引html个人网页无缺代码哪里，不数组的界说同页面的弹框或表格数据不相同，咱们可以经过html是什么意思给封装的公共组件传递不同的数据，使其展现不同。

其实一个.vuehtml文件便是一个组件，只不过是页面等级的组件算了

独立拆分的组件之拆分进程

第一步组件拆分

原本都写在一个文件中的内容，比如一个.vue文件的结构中包括头部、底部、内容区。咱们把头部的html、css、js的内容，单HTML独拎出来成为一个新的.vue文件。当然底部、和内容区的也相同独自拎出来。独自拎出来的就放在components文件夹下吧

第二步组件引进

imp数组词ort dialogMask from "./components/d陈思思ialog";

第三步组件注册appstore

// 是components不是component，要加个s，由于组件可能要注崇圣寺三塔册多个
export default {
// ...
component长生十万年s: {
dialogMask,
},
}

第四产品设计专业步组件运用

<div capplelaAPPss="dialog数组排序">
<dialog-mask></dialog-mask>
</陈思思div>

公共复用的组件之产品战略拆分进产品司理程

复用组件的拆分进程，最approveappointment后el-产品table组件的html简略网页代码二次封装会阐产品策略明，诸位看官且继续往下看。这数组初始化儿先按下不表。
说道组件的封装，就要数组指针与数据传递打交道，所以这儿简略说一下vue组件间的数据传递，又由于封装组件大多数的数据传递是以父子组件数组超崇高骑士排序的传递为主，所以这儿提一下vue父子组件间的数据传递。

父子组件间的产品设计长沙市天气数据传递之两种办法

办法一（v-bin产品设计d加v-on）

父传子

父组件v-bind绑定自己data中数据传递给子组件
子组件经过props接纳到在页面中运用

进程图如下：

子传父

子组件经过this.$长沙师范学院e数组指针mit(‘event长生十万年Nahtml个人网页无缺代码mehtml5‘,’参数’)触发父组件中的办法
父组件要提早在组件上经过v-on露出给子组件以便调用

进程图如下：

办法二（运用ref取值赋值）

父传子或子传父

第一步，给子组件打一个ref，就可以看到子组件一切的东西，感兴趣的html标签朋友可以超神兽宠店打印一html文件怎样翻开下thhtml5is.$refs.dialogRef效果一目了然数组的界说。 <dialogMashtml标签特征大全k ref="dialoghtml标签Ref"></dialogMa数组指针sk>
第二步，在父组件中把父组件的数据赋给子组件（父传子）this.$refs.dialhtml标签特征大全ogRef.子组件的数据 = this.父组件的产品司理数据
第三步，在子组件中直接取到拿到子组件的数据赋给父组件 thAPPis.父组件的数据 = this.$refs.dialogRef.子组件的数据

父子组件的产品质量法办法的互相调用

就记住常用的办法吧

父组件调用子组件的办法,运html简略网页代码用ref
this.$refs.xxx.childMethods()
子组件调用父组件的办法，运用this.$emit(‘eventName’,’参数’)html标签特征大全

饿了么UI中的el-table组件的二次封装

饿了html代码么UI的组件是饿了么团队依据vue封装的，里面有许多常用的组件，便利html文件怎样翻开咱们快速开发项目。不过假定咱们的项目中的许多页面都有表格出现，表格的结构差不多，便是数据不相同，html标签特征大全假定我么产品设计每个页面都去写el-tabl数组指针e一大堆的话，就会比较费approach事，倒不如自己封装一个公共的table组件，那个页面用table的话，那个页面就html文件怎样翻开引进来，传参即可。

第appreciate一步，新建组件，注册并在main.js引产品战略入

流程图如下：

至此，咱们自appstore界说的封装陈涉世家翻译及原文的myTable组件现已注册好了，那个页面需求陈涉世家翻译及原文用，就在那个页面去引进，传对应html代码的参数即可

第二步，产品司理依据数组词需求考虑传参

咱们先看一下效果图：

需求如下：

复选框列和序号列可操控是否展现
表头数据动态产品设计专业展现
表内容数据也动态展现

实践项目中咱们要html网页制造发央求获取表的数产品运营据和表内容产品质量法数据，这儿的话，咱们就模仿一下数据即可

封装的myTable组件代码

<template>
<div class="box">
<el-table
:data="tableData"
border
style="width: 100%"
@sehtml简略网页代码lection-change="handleSelectionChange"
>
<!-- 复选框列
复选框列和索引列由于有的闪现产品范畴的偏好有的不闪现，所以咱们运用一个v-if去操控它，
v-if的标识取决于父组件（引用这个组件的组件）传递过来的标识。子组件也便是
咱们封装的这个myTable组件用陈涉世家翻译及原文props接纳一下又由于复选框要有勾选时数组初始化刻所以
@select-change工作不能落下
--&数组gt;
<el数组初始化-tab产品le-colum陈涉世家翻译及原文n
v-if="isShowCheckbox =approach= true"
type="selecthtmlion"
width="48"
fixed
></e仓鼠养殖八大忌讳l数组和链表的差异-table-coappearlumn>
<!-- 索引列 -->
<el-数组和链表的差异table-column
v-if="isShowIndex仓鼠寿数 == true"
labehtml文件怎样翻开l="序号"
type="index"
width="50"
fixed
>
</el-table-column>
<产品介绍!-- 主内容列
主内容列的表头便是label，表头列对应的数据便是prop，所以父组件可以传递过来
一个数组，里面的每一项便是label的名字和prop对应的值。经过v-for就动态了
--&gappreciate产品批号是生产日期吗t;
&l产品设计t;el-t数组排序able-column
:prop="item.pHTMLropName"
:label="item.l超崇高骑士abelName"
v-for="(item, indexhtml个人网页完好代码appstore) in tableHeaderTitle"
:khtml个人网页完好代码ey="index"
>
</el-table-column>
&lhtml标签特点大全t;/el-table>
</div>数组的界说
</template>
<script&g产品范畴的偏好t;
export default {
name: "mhtml5yT产品司理able",
prop产品设计s: {
// 父组件传递过来的表头的数html代码组数据
tableHeaderTitl仓鼠寿数e: {
ty数组词pe: Array,
default: [],
},
/陈涉世家翻译及原文/ 父组件传递过来的表内容的数组数据
//  留神：陈思思表头产品运营内容数据和表内容数据有关联产品生命周期的
tableDhtml网页制造ata: {
type: Array,
default: [],数组的界说产品范畴的偏好
},
// 父组件传递过数组c言语来的是否展现复选框列的标识
isSho超神兽宠店wCappearanceheckbox: {
type: Boolean,
de陈思思fault: false,
},
// 父组件传递过来的是否展现序号索产品引列的app安装下载标识
isShowIndex: {
type: Boolean,appreciate
defaul陈涉世家翻译及原文t: false,
},
},
methodhtml简略网页代码s: {
// 勾选往后，要把勾选的这一行的数据传递给父组件，以供运用
h产品介绍andleSelectionChange(checked) {
this.$emit("receiveC数组词heckedDHTMLata", checked);
},
},
};
</script>

引用APPmyTable组件的父组件代码

<templahtml数组的界说5te&gt产品运营;
<div id="app">
<!-- 由于之前现产品生命周期已vue全局注册了自己封装的组件，所以html代码这儿不需求在引进这个组件了
可以直接用即可 -->
<my-table
:tableHe产品设计aderTitl仓鼠寿数e="tableHeaderT产品设计专业itleappointment"
:tableData="tableDapproveata"
:isShowCheckbappearanceox="isShowCheappAPP设备下载ckbox"
:isShowIndex="html标签特征大全isShowIndex"
@receiveCheckedData="receihtml标签veChecappointmentkedData超崇高骑士"
></my-table>
</div>html是什么意思
</template>
<script&仓鼠寿数gt;
export default {
data() {
return {
// 模仿表头数据，实践要发央求获取崇圣寺三塔的
t产品ableHeaderTitle: [
{
propName: "name",
labelN产品生命周期ame: "名陈涉世家翻译及原文字",approach
},
{
propName: "age",
labelName: "年纪",
},
{
phtml是什么意思ropName: "gender",
labelhtml是什么意思Name: "性别",
},
{
propName: "height",
labelName:长沙师范学院 "身高appstore数组指针",
},
{
propName: "weight",
label数组函数的使用办法Name: "体html标签特点大全重",
},数组公式
{
phtml网页制造ropName: "l产品生命周期ike",
labelName: "喜爱",
},
{
prop数组排序Name: "addresshtml标签"数组的界说,
labelName: "住址",
},html标签
],
// 模仿表内容数据
tableDataapplication: [
{
id:"11111",
name: "孙悟html网页制造空",
age: 5html500,
gender: "男",
height: "七尺男儿",
weight:html网页制造 "三百吨",
like: "桃子",
address: "花果山水帘app设备下仓鼠寿数载洞数组和链表的差异",
},
{
id:"22222",
name数组函数的使用办法: "猪八戒",
age: 88,
gapp安装下载ender: "男",
height: "七尺男儿"数组公式,
weight: "八百吨",
like: "肉包子",
address: "高老庄",
},
{
id:"33333",产品介绍
name: "沙和尚",
age: 1000,
gender: "男",
height: "七尺男儿",
weight: "三百吨"陈思思,
liapprovekhtmle: "鱼",
address: "通天河",
},
],
// 是否展现复选框列
isShowCheckbox:true,
// 是否展现序号HTML索引列
i数组和链表的差异sSho陈思思wIndex:true,
};
},数组函数的使用办法
methods: {
// 接纳子组件勾选的行的数据html是什么意思
receiveCheckedData(check产品ed){
console.产品运营log('checked',checked);
}
},
};
</script>
<style lang="less"appstore长沙师范学院 scope产品介绍d>
#app {
wappointmentidth:数组指针 100%;
min-height: 100vh;
box-sizing: border-box;
paappearancedding: 50px;
}
</style>

在实践状况中，需求依据产品的需求，去做出对应的封装。组件封装一定要数组c语言活络

弥长沙师范学院补（看饿了么数组和链表的崇圣寺三塔差异组件的收成）

咱们翻开node_modules文件夹下，里html面有许多的数组词依托包（库），咱们找到element-ui的这个文html文件怎样翻开件夹，html网页制造里面的packages文件夹存放的便是饿了么团队封装好的组件。如html网页制造下图：

没事看看也挺好，也能产品学到不少的东西

小伙伴们假定觉得文章写的还牵强姑息能看，给鼓舞一下点个赞呗仓鼠养殖八大忌讳。感谢哦

vue的组件化的理解之单独拆分的组件&组件的封装（以el-table组件的二次封装举例）