provide 和 inject

官网解释：provider/inject

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

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

示例：

• first：定义一个parent component, 在这里我们在父组件中provide for这个变量。

  <template>
    <div>
      <childOne></childOne>
    </div>
  </template>
  
  <script>
      import childOne from '../components/test/ChildOne'
      export default {
      name: "Parent",
      provide() {
          return {
              for: "demo"
          }
      },
      components:{
          childOne
      }
    }

• second 定义一个子组件

  <template>
    <div>
      {{demo}}
      <childtwo></childtwo>
    </div>
  </template>
  
  <script>
    import childtwo from './ChildTwo'
    export default {
      name: "childOne",
      inject: ['for'],
      data() {
        return {
          demo: this.for
        }
      },
      components: {
        childtwo
      }
    }
  </script>

• third 定义另一个子组件

  <template>
    <div>
      {{demo}}
    </div>
  </template>
  
  <script>
    export default {
      name: "",
      inject: ['for'],
      data() {
        return {
          demo: this.for
        }
      }
    }
  </script>

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

运行结果是 demo demo

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