provide/inject实现祖先组件向其他子孙组件注入一个值

实例 祖先组件

<template>
  <div id="app">
  <!--通过v-if显隐控制路由重新渲染页面实现刷新-->
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
   //向组件外暴露一个
  provide() {
    return {
      //暴露名称 绑定的本组件属性
      reload: this.reload
    };
  },
  data() {
    return {
      //变量
      isRouterAlive: true
    };
  },
  methods: {
    //调用reload方法控制是否渲染
    reload() { 
      //变量赋值
      this.isRouterAlive = false;
        //;值的改变使DOM重新渲染,this.$nextTick(callback)
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
  }
};
</script>

this.$nextTick(callback);

官方解释：将回调延迟到下次 DOM 更新循环之后执行在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
个人理解:当数据或是其他因素变化引起的Dom更新时,直接读取和使用DOM的参与变化的值,可能得到的是更新前的,DOM没有更新完成;将要执行的代码放在this.$nextTick(callback)的callback中,会使其在DOM更新后执行,确保是新数据;

例: this.$nextTick(function() {
this.isRouterAlive = true;
});

子孙组件

export default {
    name: 'pickList',
    //在default下 与 data/watch/computed等同级位置注入,注入的字符串名字要与上面暴露的一致
    //然后在此组件的其他位置就可以调用了    this.reload();
    inject: ['reload'],
    computed: {
      getCancelId() {
      }
    },
    watch: {
      getCancelId(value) {
      }
    },
    data() {
      return {
       }
    }

官方建议:provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 2.2.0 新增
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

provide：Object 或 () => Object 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性
inject：Array<string> 或 { [key: string]: string | Symbol | Object } 这是去看vue.js官网吧一时写不明白,简单用自己理解的说下,应该是一个String类型的数组,或者是一个对象,当是数组时比较好理解直接是provide中暴露的属性名的字符传数组["a"],当是对象时 key是与本地绑定的值,值是字符串,或Symbol或是一个对象,当是字符串时与provide暴露的一致,当是Symbol时与provide暴露的Symbol一致;当是对象时,对象的两个key分别是 from 和default ,对应的值是provide暴露的(注入的内容) 字符串或 Symbol; 说不明白,以后加示例吧.

浪客行1213的简书

---

xhh