刷新页面：provide和inject的使用

刺骨的言语ヽ痛彻心扉 2023-07-10 14:20 64阅读 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 条评论，64人围观）

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

相关阅读

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

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

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

相关 Vue中使用provide和inject

![format_png][] 相信大家在工作中一定遇到过多层嵌套组件，而vue 的组件数据通信方式又有很多种。比如vuex、与children、prop、与on、

╰半橙微兮°/ 2023年02月13日 08:17/ 0 赞/ 12 阅读

相关 Vue provide/inject使用

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

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

相关 provide和inject

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

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

相关 provide/inject

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

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

相关 vue3.0 inject 和 provide 使用

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

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

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

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

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

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

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

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

相关 provide / inject 的简单使用

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

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

相关 vue provide和inject

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

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