Vue 中的 provide & inject 是什麼，如何使用？

Vue.js 是當前前端界非常流行的一款 JavaScript 框架，擁有著響應式的資料綁定、元件化的視圖架構以及依賴追蹤和模板渲染等等很多的優秀特性。而其中最常用的功能是組件化編程，Vue 為我們提供瞭如組件註冊、組件傳參等等功能檢驗，但在某些情況下組件數據的傳遞便會遇到較為棘手的問題，此時，我們就可以使用Vue 中提供的provide 和inject 來解決這類問題。

理解provide & inject

provide

Vue2.2.0 版本新增了provide / inject ，其能夠更好的幫助我們完成物件導向編程的需求。通俗的講 provide 就是我們可以在父組件中提供數據，然後再子組件中使用 inject 來獲取所需的數據的一個過程。

提供一個例子來更好的理解provide ：

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

在父元件中，我們向下提供了一個鍵為foo 的資料給到子組件中。隨後在子元件中我們我可以透過 inject 來取得這份資料。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

到這裡，我們就實現了提供和注入的完整過程。透過 provide 我們在父元件中提供數據，隨後再子元件中使用 inject 來取得數據，從而完成了元件之間的資料傳遞。

inject

inject 是一個數組，列表中宣告要注入的屬性名稱。在子組件注入一個對象，該對象的屬性名稱與提供的鍵名相同，值為提供的資料。

提供一個具體的例子來理解inject ：

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

以上程式碼中，provide 函數可以理解為父元件向下層子元件提供數據，子元件再透過inject 來接收這份數據，實現了數據的傳輸過程。

使用場景

此時，你可能會問：我們已經有了 props 父子元件之間的通訊了，為什麼還需要 provide/inject 呢？

其實，這兩者在使用情境上是不太相同的。以下是一些可使用provide/inject 實作父子元件通訊的一些場景：

1. 跨層級元件間的通訊

在Vue 中，父子元件之間的通訊可以透過props 實現，但是當跨級元件時，使用props 傳遞資料將會變得非常繁瑣。而此時可以透過 provide / inject 方式，在祖先元件中提供數據，然後在子孫元件中透過 inject 取得所需數據。

2. 父元件不清楚特定的子元件實作

在某些情況下，父元件並不清楚子元件內部的資料具體存放在哪個props 中，而此時可以透過provide 的方式將資料傳遞到子元件中。

3. 可以用一個觀察者來觀察值的變化，幫助元件整合的實作

#透過provide / inject 方式，我們可以將數據提供給子孫組件，給父級留下觀察的入口，從而實現組件整合。

4. 不適合使用props 時

在Vue 中，props 是唯一一種官方的、比較好用的、用於父子之間傳遞資料的方式。但在某些情況下，如多個子元件希望使用相同的全域變數、提供的公共方法的情況下，就可以使用 provide / inject 方式。

總結

透過本文的介紹，我們了解到了 Vue 中提供的 provide / inject 的基本用法，以及它們的使用場景。

在使用provide / inject 的過程中，我們需要注意三點：

1. provide / inject 主要用於高階插件開發，對於開發普通組件的程式設計師是不需要掌握的。
2. provide 選項應該是一個物件或傳回一個物件的函數。這個物件包含可注入其它組件的屬性。
3. provide / inject 主要解決的問題是跨層級元件之間的訊息傳遞，常用於外掛程式開發。

最後，當我們遇到跨級元件通訊等問題時，就可以使用provide / inject 來解決問題，它為我們提供了更便捷的程式設計方式，讓我們的程式碼更加簡潔、易懂。

以上是Vue 中的 provide & inject 是什麼，如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！