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() 方法為父類菜單
        }
    }
})