Vue组件化的理解就是分离拆分组件&组件封装（以el-table组件的二次封装为例）
#app{width:100%;最小高度：100vh；框大小：边框框；padding:50px;}什么是组件化？组件化是一个思想，就是拆分，通俗的说，就是有大有小（没有小有小），方便管理。例如，中国地大物博，人口众多，难以管理，为了便于管理，就划分了很多省、市、自治区。编写代码也是如此。如果几万行代码都写在一个文件里，耦合太严重了，为了便于管理，就分开了。但是组件化不能过渡使用，也不能为了组件化而组件化。合理使用是区分组件化和模块化的最好方法。组件化-ui视图层面的拆分以Vue为例，一个页面有header、contentarea和bottom。它可以拆分。这里的拆分一般是带stylecss的，所以称为UI视图层面的拆分（当然也包括js的相关逻辑）Modular-jslevelsplitModularsplit主要在js逻辑层面进行拆分，两者相似，但不同组件的分类是独立拆分的。例如，我们将页面的页眉、内容区域和底部拆分为三个独立的组件。常用的复用组件比如在很多路由页面中，需要用到弹框或者表单。我们可以封装一个弹框或者一个表格，在需要引用的地方，不同页面的弹框或者表格数据是不同的，我们可以给封装的公共组件传递不同的数据，让它们有不同的显示。一个.vue文件其实就是一个组件，无非就是一个页??面级的组件。拆分一个独立拆分的组件，第一步就是把原来写在文件里的内容，比如.vue文件的结构。包括头部、底部、内容区。我们把header中的html、css、js的内容分离出来，做成一个新的.vue文件。当然，底部和内容区也是分开取出来的。单独拿出来放到components文件夹下。第二步，从“./components/dialog”引入组件importdialogMask；第三步注册组件//是组件，不是组件，需要加一个s，因为组件可能需要注册Multipleexportdefault{//...components:{dialogMask,},}的第四步组件使用
进行公共复用组件的拆分步骤复用组件的拆分步骤，最后二次封装el-table组件会有说明，请看官方继续往下看。这里先按无表。说到组件封装，必然要处理数据传递，所以这里简单说说vue组件之间的数据传递，又因为封装组件的数据传递大部分是基于父子组件的传递，所以这里提一下vue父子组件之间的数据传递。父子组件间数据传递的两种方法方法一（v-bind加v-on）父组件v-bind将自身数据中的数据绑定，传递给子组件子组件通过props接收并使用页面上的图片如下：父子组件通过this.$emit('eventName','parameter')触发父组件中的方法。父组件需要提前在组件上通过v-on暴露给子组件，以便调用步骤。图如下：方法二（使用ref赋值）第一步是父传子或子传父。对子组件做一个ref，就可以看到子组件里面的所有东西了。有兴趣的朋友可以打印this.$refs.dialogRef，结果一目了然。.
第二步是在父组件（parenttochild）this.$refs.dialogRef中将父组件的数据赋值给子组件。子组件的数据=this。父组件第三步，直接在子组件中获取子组件的数据，赋值给父组件this。父组件的数据=this.$refs.dialogRef。子组件的数据。让我们使用常见的方式。父组件调用子组件的方法，使用refthis.$refs.xxx.childMethods()子组件调用父组件的方法，使用this.$emit('eventName','parameter')this.$emit('eventName','parameter')饿了么UI中el-table组件的二次封装。饿了么UI的组件是基于vue封装的，里面有很多常用的组件，方便我们快速开发项目。但是，假设我们项目中的很多页面都是用表格来呈现的，那么表格的结构是相似的，只是数据不同而已。如果我们每个页面都写很多el-table，会比较麻烦，所以最好自己封装一个公用的table组件，如果页面使用了table，那个页面就会被导入，传参就行了。第一步是创建一个新组件，注册它，并将其导入main.js。流程图如下：至此，我们自定义封装的myTable组件已经注册完成。如果该页面需要使用，只需在该页面导入，并传递相应的参数即可。第二步，根据需求考虑传递参数。先看效果图：需求如下：复选框列和序号列可以控制是否显示表头数据，动态显示表格内容数据，动态显示实际项目。我们需要发送请求来获取表数据和表内容数据。这里，我们模拟出可以被数据封装的myTable组件代码。 