Vue provide/inject使用

想象一个场景，子组件依赖父组件传递的props，如果有多个这样的props，其实已经很烦了，当有多个子组件，或者孙组件也依赖于由上至下的props时，写那么多props简直是要了亲命了。

为了解决这种麻烦，产生了vuex。但是我们肯定希望组件的高可复用性，不引入vuex就能实现功能，那就要考虑vue本身是否支持这种能力了。熟悉React开发的人应该会想到Context这个高阶组件，它通过Provider和Consumer，可以使得无限嵌套的父子组件共有一个数据源。Vue也有一个类似的，连名字都很相似，就是这篇文章的主人公provide和inject。

// parent组件
<template>
  <div>
    <div>{{test}}</div>
    <button @click="changeTest">修改test的值</button>
    <son></son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "parent",
  components: { Son },
  provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: "测试",
    };
  },
  methods: {
    changeTest() {
      this.test = "测试后";
    }
  }
};
</script>

//son组件
<template>
  <div>{{injectData}}</div>
</template>


<script>
export default {
  name: "son",
  inject: ["injectData"],
  mounted() {
    // eslint-disable-next-line
    console.log(this.injectData)
  },
};
</script>

parent组件使用provide提供一个injectData，son组件通过inject获取到parent注入的数据，以上就是它的最简用法。有一点需要注意，我们可以将inject得到的数据直接赋值给子组件的data或props，但是这个是在vue版本2.1之后才有的功能，这版本之前，会在data，props得到之后再得到注入的值。

使用provide/inject我们需要注意的是：

provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是：一个对象或返回一个对象的函数
inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

也可以用来调用方法

父组件中

export default {
        name: 'Index',
        provide() {
            return {
                Index: this
            }
        }
}

子组件中