最近在看element-ui的源码，发现了一个这样的属性：inject。

provider/inject：简单的来说就是在父组件中通过provider来注入，然后在子组件中通过inject来引用。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

官方文档：https://cn.vuejs.org/v2/api/#provide-inject

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据，而不是局限于只能从当前父组件的prop属性来获取数据。

例子1：传值

<!-- 父组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import childOne from "../components/ChildOne";
export default {
  name: "Parent",
  provide() {
    return {
      demo: "hello Parent"
    };
  },
  components: {
    "child-one":childOne
  }
};
</script>

<!-- 子组件1 -->
<template>
  <div>
    {{ ChildOne }}
    <child-two></child-two>
  </div>
</template>

<script>
import childTwo from "./ChildTwo";
export default {
  name: "child-one",
  inject: ["demo"],
  data() {
    return {
      ChildOne: this.demo
    };
  },
  components: {
    "child-two":childTwo
  }
};
</script>

<!-- 子组件2 -->
<template>
  <div>
    {{ ChildTwo }}
  </div>
</template>

<script>
export default {
  name: "child-two ",
  inject: ["demo"],
  data() {
    return {
      ChildTwo: this.demo
    };
  }
};
</script>

在 2 个子组件中我们使用jnject注入了provide提供的变量demo，并将它提供给了data属性。

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。

例子2：调用父组件方法

其实，不仅仅是传值，还可以调用方法，例如

<!-- 父组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import childOne from "./components/ChildOne";
export default {
  name: "Parent",
  provide() {
    return {
      reload: this.reload
    };
  },
  components: {
    "child-one":childOne
  },
  methods: {
    reload() {
      console.log("hello Parent")
    }
  }
};
</script>

<!-- 子组件1 -->
<template>
  <div>
    childOne
  </div>
</template>

<script>
export default {
  name: "child-one",
  inject: ["reload"],
  mounted() {
    this.reload();
  },
};
</script>

总结

provide/inject 是解决组件之间的通信问题的利器，不受层级结构的限制，但也不是随便去滥用，通信代表着耦合！官方其实也不推荐直接用于应用程序代码中。