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() 方法为父类菜单
        }
    }
})