美文网首页
vue中的provide和inject ---实例 route

vue中的provide和inject ---实例 route

作者: 冰落寞成 | 来源:发表于2021-06-01 08:57 被阅读0次

一、 使用场景 ，如下图

消息提示按钮 在组件layer 里面，需要处理消息的按钮在另一个组件的子组件里面，处理一条身份认证，消息按钮的红色提示要减去1，简单的办法就是刷新当前页面

image.png

二、刷新页面

首先想到的是使用window.reload()，或者router.go(0) 刷新当前页面，但是会出现整个浏览器进行了重新加载，闪烁，体验不好。

三、解决办法

使用vue 的provide和inject

四、provide和inject 讲解

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

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

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：

  • 一个字符串数组，或
  • 一个对象，对象的 key 是本地的绑定名，value 是：
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
    • 一个对象，该对象的：
      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

五，具体使用

5.1 在app.vue 里面改写

image.png

代码：

<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>

5.2 在需要使用的子组件里注入

image.png image.png

代码如下：

export default {
  name: 'headerTool',
  inject: ["reload"],
   .... // 省略的代码
  methods: {
    onMessage (e) {
      ....// 省略的代码
      this.reload();  
    }
  }
}

相关文章