vue 组件更新或当前路由页面更新

参考：exclude（排除）属性数组，数组里面元素是组件页面的名字，如果exclude数组默认为null即都不排除都使用keep-alive，当在触发刷新时，先把当前页面组件的名字加进去，即排除该组件，等到nextTrick再排除掉

参考：依赖注入 - Provide/Inject

参考：vue通信方式：

• 父子组件：通过prop，$emit，【$root，$parent，$children】
• 非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref

子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。应当节制地使用它们，其只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信.

正常情况下，这两种方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代码应优先使用它们处理。然而，还有一种主要为高阶插件/组件库提供的用例办法，即provide/inject，这对选项需要一起使用。

provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props

但是 官网不建议在应用中直接使用该办法

设计项目，通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护，然而这对选项支持任意层级都能访问，导致数据追踪比较困难。不知道那一层级声明了provide又或是哪些层级使用了inject。造成比较大的维护成本。因此，除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。

案列：

在父组件中provide提供变量

<template>
  <div class="page-main">
    <keep-alive :exclude="exclude">
      <router-view v-if="isShow" :key="key"></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'page-main',
  data() {
    return {
      isShow: true,  // 更新组件或路由或当前页
      exclude: null, // 不排除--默认缓存所有组件--如果不用keep-alive可以直接更新
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      // 先隐藏
      this.exclude = 'page-lsbk-plbk'; // 不缓存name:'page-lsbk-plbk'的页面
      this.isShow = false;
      // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
      this.$nextTick(() => {
        this.exclude = null;  // 不排除--缓存所有页面
        this.isShow = true;
      })
    }
  }
}
</script>

 在子组件中

<script>
export default {
  name: 'page-lsbk-plbk',
  inject: ['reload'],
  methods: {
    resetData(){
        this.reload();
    }
  }
}