在vue页面中添加组件到底有多方便

修改vue写的前端页面到底有多方便?如果熟练的话,出乎你想象的快。

原来的页面:/admin/stock

原来的文件地址:src\views\admin\stock\Stock.vue

在vue页面中添加组件到底有多方便_第1张图片

另一个页面有个入库功能,需要转移到上面的页面中:

路径:/purchase/request

地址:src\views\purchase\request\Request.vue

在vue页面中添加组件到底有多方便_第2张图片

入库功能包括一个开启按键(1)和一个弹出表单(2):

 在vue页面中添加组件到底有多方便_第3张图片

开启按键代码:

入库
    warehouse () {
      this.stockAdd.visiable = true
    },

弹出表单窗口是一个独立存在的vue文件:

路径:src\views\purchase\request\RequestAdd.vue

RequestAdd.vue代码:






在Request.vue中引用RequestAdd.vue的方法:

    
    

实际上就是在Request.vue中添加一个数据对象(requestAdd.visiable)和两个方法(handleRequestAddClose、handleRequestAddSuccess)

开始改造

将RequestAdd.vue文件加入Stock.vue所在路径,修改合适的文件名称为StockAdd.vue,同时修改StockAdd.vue对外暴露的name和props的名称。在vue页面中添加组件到底有多方便_第4张图片

在Stock.vue的