Html中使用Vue在iframe子頁面中重新整理父頁面內容實現區域性重新整理
阿新 • • 發佈:2021-01-20
第一步:將父頁面中使用建立Vue例項掛載到全域性window物件中。
new Vue({ el: '#app', data() { return { msg: '', loadingData: [] } }, beforeCreate: function () {}, mounted: function () { const that = this; // 整個物件賦給window全域性變數 windows["loadingHome"] = that; that.loadingInfo(); }, methods: {第二步:在iframe子頁面中實現父頁面重新整理效果。/** * 初始化載入資料 */ loadingInfo: function () { // 載入相關資料 $.Ajax({ url: '', type: 'get' || 'post', dataType: 'json', success: function (data, textStatus) { // 請求成功,並把結果集賦給loadingData變數並在頁面中展示}, error: function () { // 請求異常做相關的操作提示 } }); } } });
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() 方法為父類選單 } } })