前提：
半前后台分离，前后台都是使用JSON格式的数据进行交互。【化外音，这里我说半分离，是因为使用了themleaf模板进行路由。】
业务说明：
前端通用的逻辑是：列表展示数据，点击事件弹出frame进行添加编辑操作。在这里借助vue2.x加layer来进行弹出操作。
流程分析：
拿编辑一行数据来举例，两种方向：
①将ID传入弹出层，弹出层自己去请求数据。
②父页面请求数据，将完整数据传入子页面。
选择使用第二种方式。如何传值。layer为我们提供了强大的技术支撑。
// 获取模板信息 AXIOS_INSTANCE({ url:‘xxxxxxxxx‘, data:{‘id‘:rows[0].id}, method:‘POST‘ }).then(function (response) { if(response.data.code == ‘100‘){ var temp =layer.open({ title:"编辑模板", content :‘/xxxxx/xxxxx/edit.html‘, type :2, maxmin:true, area:[‘750px‘,‘500px‘], success:function (layero) { // 通过iframe传递参数、调用函数等操作 // top.frames[layero.find(‘iframe‘)[0].id].vm.user = response.data.data; window[layero.find(‘iframe‘)[0][‘name‘]].vm.template = response.data.data; }, end:function () { vm.refresh(); } }); layer.full(temp); }else{ layer.msg(response.data.msg); } }).catch(function (error) { })
需要注意的地方：父子间传值，结合vue渲染，出问题后先考虑下是不是加载时机不正确。结合vue的声明周期来进行分析。
原文：https://www.cnblogs.com/oldwei/p/10147499.html