【前端】使用layui、layer父子frame传值

前提：

　　半前后台分离，前后台都是使用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的声明周期来进行分析。