layer.open+vue+jquery父子页面之间互相传值（完整版）建议收藏！！！
效果图：
说明：父页面list.html传值到子页面operate.html
父页面源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父页</title> 6 <script src="js/jquery.min.js"></script> 7 <script src="js/layer/layer.js"></script> 8 <script src="js/vue.min.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <table border="1"> 13 <thead> 14 <tr> 15 <td>操作</td> 16 <td>中文名称</td> 17 <td>英文名称</td> 18 <td>性别</td> 19 <td>婚姻状况</td> 20 </tr> 21 </thead> 22 <tbody> 23 <tr v-for="(item,index) in dataList"> 24 <td><a href="javascript:void(0)" @click="edit(item,index)">修改</a></td> 25 <td>{{item.nameCn}}</td> 26 <td>{{item.nameEn}}</td> 27 <td>{{item.sex}}</td> 28 <td>{{item.marriage}}</td> 29 </tr> 30 </tbody> 31 </table> 32 </div> 33 <script> 34 var addWindow=null; 35 var rs=null; 36 (function($$){ 37 rs = new $$({ 38 el:'#app', 39 data:{ 40 dataList:[ 41 {'id':'1','nameCn':'一枝花','nameEn':'a floer','sex':'女','marriage':'已婚'}, 42 {'id':'2','nameCn':'二枝花','nameEn':'two floer','sex':'男','marriage':'未婚'}, 43 {'id':'3','nameCn':'三枝花','nameEn':'three floer','sex':'女','marriage':'已婚'}, 44 {'id':'4','nameCn':'四枝花','nameEn':'four floer','sex':'男','marriage':'未婚'}, 45 {'id':'5','nameCn':'五枝花','nameEn':'five floer','sex':'女','marriage':'已婚'}, 46 ] 47 }, 48 methods:{ 49 edit:function(item,index) { 50 addWindow=layer.open({ 51 type : 2, 52 title : item.nameCn, 53 /*shadeClose : true,*/ 54 shade : 0.1, 55 maxmin : true, 56 area : [ '50%', '50%' ], 57 content : 'operate.html?callback=edItem&index='+index, 58 success: function(layero, index){ 59 var body = layer.getChildFrame('body', index); 60 var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); 61 // console.log(body.html()) //得到iframe页的body内容 62 body.contents().find("#nameCn").val(item.nameCn); 63 body.contents().find("#nameEn").val(item.nameEn); 64 body.contents().find('#sex'+item.sex).prop("checked", true);//这是子页面的单选按钮，让其选中 65 body.contents().find("#marriage").val(item.marriage);//下拉框 66 }, 67 end : function() { 68 69 } 70 }); 71 } 72 } 73 }); 74 })(Vue) 75 76 function edItem(obj,index) { 77 rs.$set(rs.dataList,Number(index),obj) 78 } 79 80 </script> 81 </body> 82 </html>
子页面源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>子页</title> 6 <script src="js/jquery.min.js"></script> 7 <script src="js/layer/layer.js"></script> 8 <script src="js/vue.min.js"></script> 9 <script src="js/JScommon.js"></script> 10 </head> 11 <body> 12 <div id='app'> 13 <button onclick="submit()">方式一</button> 14 <button @click="submit2()">方式二</button> 15 <input type="text" id="nameCn" autocomplete="off"/> 16 <input type="text" id="nameEn" autocomplete="off"/> 17 <input type="radio" id="sex男" value="男" name="sex"/><label for="sex男">男</label> 18 <input type="radio" id="sex女" value="女" name="sex"/><label for="sex女">女</label> 19 <select id="marriage"> 20 <option>select</option> 21 <option value="已婚">已婚</option> 22 <option value="未婚">未婚</option> 23 </select> 24 </div> 25 26 <script> 27 var index=comomon.getQueryString("index"); 28 var funName=comomon.getQueryString("callback"); //callback 回调函数名称 29 var vm=null; 30 (function($$){ 31 vm=new $$({ 32 el:'#app', 33 data:{ 34 obj:{ 35 'id':null, 36 'nameCn':null, 37 'nameEn':null, 38 'sex':null, 39 'marriage':null, 40 } 41 }, 42 methods:{ 43 /* 方式二是在子页面直接调用api更新父页面的值 */ 44 submit2:function () { 45 this.obj.nameCn=document.getElementById("nameCn").value 46 this.obj.nameEn=$('#nameEn').val() 47 this.obj.sex=$('input[name="sex"]:checked').val() 48 this.obj.marriage=document.getElementById("marriage").value 49 parent.rs.$set(parent.rs.dataList,Number(index),this.obj) 50 parent.layer.close(parent.addWindow); 51 } 52 } 53 }) 54 })(Vue) 55 56 /* 方式一 可以把你想 要的参数传到父页面去，你想怎么玩就怎么玩*/ 57 function submit() { 58 vm.obj.nameCn=document.getElementById("nameCn").value 59 vm.obj.nameEn=$('#nameEn').val() 60 vm.obj.sex=$('input[name="sex"]:checked').val() 61 vm.obj.marriage=document.getElementById("marriage").value 62 var evalStr ="parent."+funName+"(vm.obj,index)"; 63 eval(evalStr);// eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。 64 parent.layer.close(parent.addWindow); 65 } 66 </script> 67 </body> 68 </html>
另外附上 JScommon.js 里面的代码：
1 var comomon = (function(){ 2 return { 3 //获取get参数 4 getQueryString: function (name) { 5 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 6 var r = window.location.search.substr(1).match(reg); 7 if (r != null) return decodeURI(r[2]); 8 return null; 9 }, 10 } 11 })()
欢迎转载，请注明出处
