vue this.reload 方法配置, 优于window.reload()的页面刷新

最新推荐文章于 2023-12-12 12:07:32 发布

TianNicholas

最新推荐文章于 2023-12-12 12:07:32 发布

阅读量724

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/qq_32615575/article/details/104922792

版权

前端技术专栏收录该内容

78 篇文章 0 订阅

订阅专栏

本文介绍Vue.js中provide/inject依赖注入的使用方法，通过实例演示如何在祖先组件中注入依赖，以便子孙组件可以访问和调用。具体展示了home.vue组件中reload方法的注入与子组件中的调用过程。

摘要由CSDN通过智能技术生成

解决方法

provide / inject 依赖注入

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

home.vue

<router-view v-if="isReloadAlive"></router-view>
 
export default {
    provide() {
         return {
             reload: this.reload
         }
    },
    data(){
        isReloadAlive : true
    },
    methods: {
        reload() {
			this.isReloadAlive = false;
			this.$nextTick(function(){
				this.isReloadAlive = true;
			})
		}
    }
}

子组件调用

export default {
    inject: ['reload'],     // 注入 reload 方法
    data(){
        。。。。
    },
    method: {
        set: function(id){
             let param = {
                  "recommendedConsultant.id": this.recommendedConsultant_id,
                   "recommendedConsultant.sequence": this.recommendedConsultant_sequence,
                   "recommendedConsultant.consultant_id": id
              }
              setRecommendedAdvisor(param).then((data) => {
                   this.$message({ message: data.ret.retMsg });
                   if(data.ret.succeed){
                       this.reload()           // 调用刷新方法
                   }
              });
        }
    }
}