前提：

　　半前後臺分離，前後臺都是使用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的宣告週期來進行分析。