VUE3初學者入門：使用provide / inject實作元件之間的共享

VUE是一款現代化的前端框架，具有易用性高、靈活性強、效能優異等優點，越來越受到前端開發者的歡迎與青睞。而VUE3版本帶來了更出色的效能和更優秀的架構設計，更具有使用者友善性。在 VUE3中，提供了一種新的方式來實現元件之間共享資料的功能—provide / inject。本文將詳細介紹provide / inject的用法和實作過程。

概述

provide / inject是VUE3官方推薦的實作元件之間共享資料的方法。而在VUE2中，我們常常透過props / $emit和Vuex等方式來實現元件之間的資料通訊。而provide / inject的最大特點在於，它以一種更隱式的方式來實現資料共享，使得程式碼更具可讀性和易於維護性。

provide / inject的用法

provide / inject的使用方法非常簡單，以下是幾個例子：

父元件提供資料

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

在在父元件中，我們透過provide方法來提供了一個名為message的數據，並將其值設為'Hello from parent'。接著，我們可以在子元件中使用inject來取得這個資料：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

在子元件中，我們透過inject方法來取得名為message的數據，此時我們就能夠在範本中使用這個數據了。

子元件提供資料

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

在這個例子中，我們在父元件中定義了一個名為message的響應式數據，並將其值設為'Hello from parent'。我們接著透過 provide 方法將該資料提供給子元件。在子元件中我們透過 inject 方法取得 message，並在範本中使用它：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

注意，這裡我們定義的 message 資料是響應式的。

provide / inject的實作過程

provide / inject的實作方式依賴VUE3中全新的回應系統。在VUE3中，provide / inject 依賴provideParent / injectSetupRef來運作。 provideParent 函數和 provide 方法類似，都接收一個資料的鍵名和值，而injectSetupRef則是用來從父元件取得資料的。具體實作過程如下：

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

在provide函數中，我們透過getCurrentInstance函數取得目前實例，並將提供的資料儲存在目前實例的provides物件上。如果目前實例不存在，則表示這個provide函數不在setup函數中被調用，並傳回警告訊息。

而在inject函數中，我們同樣透過getCurrentInstance函數取得目前實例，並從其父元件的provides物件上取得key對應的值。如果key對應的值不存在，則傳回defaultValue。如果目前實例不存在，則表示這個inject函數沒有在setup函數或函數式元件中被調用，並傳回警告訊息。

總結

透過本文的介紹，我們可以知道provide / inject是一種優秀的實作VUE3元件之間共享資料的方法。它以一種更隱式的方式來實現資料共享，使得程式碼更具可讀性和易於維護性。在使用過程中需要注意提供的資料是響應式且可以在嵌套組件中使用。同時，需要注意如果我們提供的資料並不存在於 provide 中，那麼會使用arguments[1]中傳遞的參數作為預設值，此時需要隨時注意參數的類型和值。

以上是VUE3初學者入門：使用provide / inject實作元件之間的共享的詳細內容。更多資訊請關注PHP中文網其他相關文章！