第一步:将父页面中使用创建Vue实例挂载到全局window对象中。
new Vue({ el: '#app', data() { return { msg: '', loadingData: [] } }, beforeCreate: function () {}, mounted: function () { const that = this; // 整个对象赋给window全局变量 windows["loadingHome"] = that; that.loadingInfo(); }, methods: { /** * 初始化加载数据 */ loadingInfo: function () { // 加载相关数据 $.Ajax({ url: '', type: 'get' || 'post', dataType: 'json', success: function (data, textStatus) { // 请求成功,并把结果集赋给loadingData变量并在页面中展示 }, error: function () { // 请求异常做相关的操作提示 } }); } } });
第二步:在iframe子页面中实现父页面刷新效果。
new Vue({ el: '#app', data() { return { msg: '', loadData: [], } }, beforeCreate: function () {}, mounted: function () { const that = this; that.loadingChildrenDetails(); }, methods: { /** * 初始化子页面信息 */ loadingChildrenDetails: function () { // 加载相关数据 $.Ajax({ url: '', type: 'get' || 'post', dataType: 'json', success: function (data, textStatus) { // 请求成功,并把结果集赋给loadData变量并在页面中展示 // 执行相关的逻辑代码 // 执行成功之后调用全局的变量刷新父页面局部 parent.loadingHome.loadingMenus(); // loadingMenus() 方法为父类菜单 }, error: function () { // 请求异常做相关的操作提示 } }); }, optionsChildren: function () { // 执行相关的逻辑代码 // 执行成功之后调用全局的变量刷新父页面局部 parent.loadingHome.loadingMenus(); // loadingMenus() 方法为父类菜单 } } })