刷新页面：provide和inject的使用

刺骨的言语ヽ痛彻心扉 2023-07-10 14:20 54阅读 0赞

provider/inject依赖注入：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

**这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。**

## vue中使用方法 ##

在App.vue中定义`provide`函数。比如我这里的刷新页面的方法。

<template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
    
    <script>
    export default{ 
      name: 'App',
      provide() { 
        return { 
          reload: this.reload
        }
      },
      data() { 
        return { 
          isRouterAlive: true
        }
      },
      methods: { 
        reload() { 
          this.isRouterAlive = false
          this.$nextTick(() => { 
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>

在需要刷新的页面引入`inject`。

export default { 
    	inject: ['reload'],
    	data() { 
    		return { 
    		}
    	},
    	methods: { 
    		cancel(row) { 
    	      this.reload()
          }
        },
    	}
    }

![在这里插入图片描述][202003031048437.png]

[202003031048437.png]: https://img-blog.csdnimg.cn/202003031048437.png

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关刷新页面：provide和inject的使用

provider/inject依赖注入：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。这里不论子组件有多深，只要调用了inject那么

刺骨的言语ヽ痛彻心扉/ 2023年07月10日 14:20/ 0 赞/ 55 阅读

相关 Vue provide/inject使用

[https://www.jianshu.com/p/e574b832fdbc][https_www.jianshu.com_p_e574b832fdbc] [https_

秒速五厘米/ 2022年12月22日 11:23/ 0 赞/ 208 阅读

相关 provide和inject

父组件 <script> import helloworld from "../components/HelloWorld"; provide(

阳光穿透心脏的1/2处/ 2022年12月15日 03:36/ 0 赞/ 168 阅读

相关 provide/inject

概述 `provide/inject`：简单的来说就是在父组件中通过`provide`来提供变量，然后在子组件中通过`inject`来注入变量。需要注意的是这里不论子

桃扇骨/ 2022年12月12日 13:49/ 0 赞/ 182 阅读

相关 vue中的provide和inject

一、名词解析： `provide：Object | () => Object` `inject：Array<string> | { [key: string]: st

雨点打透心脏的1/2处/ 2022年12月08日 05:17/ 0 赞/ 151 阅读

相关 vue3.0 inject 和 provide 使用

组合式提供与注入：[Vue 3 组合式 provide/inject - 知乎][Vue 3 _ provide_inject -] 在之前的章节，我们讲了选项式的提

迷南。/ 2022年09月17日 06:17/ 0 赞/ 166 阅读

相关 vue3.x 使用 provide，inject 重载页面数据

1. 场景：在增加，修改或者删除一条记录的后希望当前页面可以重新刷新 2. 使用 provide，inject，nextTick 实现 2.1 App.vue 生产

╰半橙微兮°/ 2022年09月16日 04:54/ 0 赞/ 58 阅读

相关最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新

这是一种最实用的vue刷新当前页面，其他方式一般会出现一个瞬间的空白页面，体验不好，相当于按ctrl+F5 强制刷新那种方式：provide / inject 组合方

秒速五厘米/ 2022年05月08日 13:50/ 0 赞/ 322 阅读

相关 provide / inject 的简单使用

provide / inject 祖先组件向其所有后代组件注入依赖 1. 组件 <template> <div> oinde

Love The Way You Lie/ 2021年08月31日 08:29/ 0 赞/ 609 阅读

相关 vue provide和inject

1、provide export default{ provide:{ key:value }, provi

ゞ浴缸里的玫瑰/ 2021年07月25日 02:42/ 0 赞/ 423 阅读