Vue 中的 provide & inject 是什麼，如何使用？-Vue.js-PHP中文網

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

PHPz

發布： 2023-06-11 12:05:53

原創

1313 人瀏覽過

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 來接收這份數據，實現了數據的傳輸過程。