vue中的provide/inject的學習

前言

最近在看element-ui的源碼，發現了一個這樣的屬性:inject.遂查看官網provider/injectvue

provider/inject：簡單的來講就是在父組件中經過provider來提供變量，而後在子組件中經過inject來注入變量。element-ui

須要注意的是這裏不論子組件有多深，只要調用了inject那麼就能夠注入provider中的數據。而不是侷限於只能從當前父組件的prop屬性來獲取數據。

下面咱們來驗證下猜測：api

• first：定義一個parent component

<template>
  <div>
<childOne></childOne>
  </div>
</template>

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

在這裏咱們在父組件中provide for這個變量。ide

• 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屬性。ui

這裏官網註明例子只工做在 Vue 2.2.1 或更高版本。低於這個版本時，注入的值會在 props 和 data 初始化以後獲得。

運行以後看下結果this

從上面這個例子能夠看出，只要在父組件中調用了，那麼在這個父組件生效的生命週期內，全部的子組件均可以調用inject來注入父組件中的值。