likes
comments
collection
share

vue components, 分层开发, 组件复用

作者站长头像
站长
· 阅读数 20

由Stu.vue 代码拆分为三个标准的component,StuList.vue, StuAdd.vue, StuEdit.vue

app

StuList, 含有el-table

StuEdit,含有el-dialog

StuAdd, 含有el-dialog

代码结构更清晰, 业务处理更加规范, 便于大项目维护和二次开发组件可以简单的理解为dom和js的组合, 但设计出一个局部的片段, 既可以开发出对应的组件, 然后在后续的业务使用时(每一次), 调用这个组件即可例如, jeecg框架的分页等功能就相当于一个组件

关键代码<StuEdit ref="stuEdit" />

getStu: function(bean){
          //lsit组件-->[stuEdit]-->stuEdit-->
          quan.$refs.stuEdit.getStu(bean);
      },
      showAdd: function(){
          //-->App.vue-->[stuList, stuAdd]-->.stuAdd.addFlag=true;
          quan.$parent.$refs.stuAdd.addFlag=true;
          
          //quan.$parent.$refs.stuAdd.addFlag=true;
      },