vue中provide/inject使用案例分析

這次帶給大家vue中provide/inject使用案例分析，vue中provide/inject使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

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

provider/inject：簡單的來說就是在父元件中透過provider來提供變數，然後在子元件中透過inject來注入變數。

要注意的是這裡不論子元件有多深，只要呼叫了inject那麼就可以注入provider中的資料。而非局限於只能從目前父組件的prop屬性來取得資料。

下面我們來驗證下猜想：

first：定義一個parent component

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

在這裡我們在父元件中provide for這個變數。

second 定義一個子元件

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

third 定義另一個子元件

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

在2個子元件中我們使用jnject注入了provide提供的變數for，並將它提供給了data屬性。

這裡官網註明範例只工作在 Vue 2.2.1 或更高版本。低於這個版本時，注入的值會在 props 和 data 初始化之後得到。

運行之後看下結果

從上面這個例子可以看出，只要在父元件中呼叫了，那麼在這個父元件生效的生命週期內，所有的子元件都可以呼叫inject來注入父元件中的值。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JavaScript DOM元素增刪改步驟詳解

Vue使用vee-validate驗證表單步驟詳解

以上是vue中provide/inject使用案例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！