Vue

1、需求

在弹出页面里操作数据，在关闭弹出页面的同时局部刷新父页面数据。（不重新加载，防止已经填写的数据丢失）

2、背景

使用 Vue，layer 进行页面开发

3、分析

a. 在弹出页面的js里通过代码获取父页面对象 let obj= window.parent ;

b.获取父页面的vue对象，let that = obj.page;(父页面定义的vue对象名为page)

c.弹出页面的数据操作通过that对象更新到父页面

d.关闭弹出页面

4、代码实现

function saveChoose(checkDate){
   if(checkDate.length<1){
       layer.msg("请至少选择一条数据")
        return
    }
   let pwIds = checkDate.join(",");
   let that = window.parent.page;
   $.get('/manage/educationTraining/getWorkers', {
      pwIds:pwIds,
   }, function(res) {
      if(res.code=200){
         let workers = res.result;
         for(var i=0;i<workers.length;i++){
            workers[i].qualified = 1;
         }
         that.workers = workers;
         that.trainingNum = workers.length;
      }
      // 关闭弹出页面，不再刷新，防止之前的数据丢失 由于此请求是异步，所以应该放在回调函数里，否则请求会被去取消
      window.parent.layer.closeAll();
   })
}

5、注意事项

关闭弹出页面的操作请务必放在ajax请求的回调函数之内，否则就会出现请求被canceled的情况。

6、其它

关于请求被取消的原因还有跨域问题，其它博客有介绍，如修改成统一的http或者https请求。