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 &#39;../components/test/ChildOne&#39;
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

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

• second 定義一個子元件

<template>
  <p>
    {{demo}}
    <childtwo></childtwo>
  </p>
</template>

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

• ##third 定義另一個子元件
  # #

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

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

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

運行之後看下結果

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

相關推薦：

vue 2 使用Bus.js實作非父子元件通訊

基於vue.js和webpack的Chat範例

Vue.js最佳實踐（五招讓你成為Vue.js大師）

##

以上是vue中的provide/inject的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！