1. 程式人生 > 實用技巧 >Html中使用Vue在iframe子頁面中重新整理父頁面內容實現區域性重新整理

Html中使用Vue在iframe子頁面中重新整理父頁面內容實現區域性重新整理

第一步:將父頁面中使用建立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() 方法為父類選單 } } })