provide與inject如何在vue項目中使用

provide與inject如何在vue項目中使用？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。

需要注意的是這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限于只能從當前父組件的prop屬性來獲取數據。

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這個變量。

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

這里官網注明例子只工作在 Vue 2.2.1 或更高版本。低于這個版本時，注入的值會在 props 和 data 初始化之后得到。

運行之后看下結果

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。