vue中的provide和inject&应用-刷新当前页

简介

provide和inject这对选项需要一起使用，一个祖先组件可以通过provide向所有子孙后代注入一个依赖，某一子孙组件也可通过inject接收这一依赖，并不只限于父子组件之间。

provide：Object | () => Object

inject：Array<String> | {[key: String]: String | Symbol | Object}

provide 应是一个对象，或者一个返回值类型为对象的函数；

inject 应该是一个字符串数组，这些字符串应该是provide 中的key；或者一个对象

• 该对象的key值是子孙组件中的绑定值
• value值可以是
  • 一个String 类型或者 Symbol 类型（即为 provide 中的 key）
  • 一个对象（该对象有两个属性，from 和 default，from 为 provide 中的key，default 是 一个默认值，当 from 中的“provide 中的key的value值不存在时”，则该inject的值为 default 的值）

应用---vue中刷新当前页

在vue工程中，可通过 provide 和 inject 定义一个刷新当前页的方法。具体实现如下：

在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.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在需要使用刷新当前页功能的子孙组件中，使用 inject 引入provide中的reload：

<script>
  export default {
    name: 'Test',
    inject: ['reload'],
    data() {
      return {
        
      }
    },
    methods: {
      detail(row, index) {
        const query = {
          INQUIRY_FLOW_ID: row.INQUIRY_FLOW_ID + '',
          PROJECT_ID: this.projectId + '',
          ORDER_ID: row.ORDER_ID + '',
        };
        // 从当前页面跳转到 当前页面 时，vue 不会主动刷新当前页面
        this.$router.push({
          name: 'Test',
        });
        // 所以，调用祖先组件的 provide 的 reload 方法进行手动刷新
        this.reload();
      }
    }
  }
</script>