【前端】使用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的聲明周期來進行分析。