通常，當我們需要從父組件向子組件傳遞數(shù)據(jù)時，我們使用 props。想象一下這樣的結構：有一些深度嵌套的組件，而深層的子組件只需要父組件的部分內(nèi)容。在這種情況下，如果仍然將 prop 沿著組件鏈逐級傳遞下去，可能會很麻煩。

對于這種情況，我們可以使用一對 provide 和 inject。無論組件層次結構有多深，父組件都可以作為其所有子組件的依賴提供者。這個特性有兩個部分：父組件有一個 provide 選項來提供數(shù)據(jù)，子組件有一個 inject 選項來開始使用這些數(shù)據(jù)。

image.png

Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

如果要將 todo-items 的長度直接傳遞給 TodoListStatistics，我們要將 prop 逐級傳遞下去：TodoList -> TodoListFooter -> TodoListStatistics。通過 provide/inject 的方式，我們可以直接執(zhí)行以下操作：

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入的 property: John Doe
  }
})

但是，如果我們嘗試在此處 provide 一些組件的實例 property，這將是不起作用的：

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    todoLength: this.todos.length // 將會導致錯誤 `Cannot read property 'length' of undefined`
  },
  template: `
    ...
  `
})

要訪問組件實例 property，我們需要將 provide 轉換為返回對象的函數(shù)：

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

這使我們能夠更安全地繼續(xù)開發(fā)該組件，而不必擔心可能會更改/刪除子組件所依賴的某些內(nèi)容。這些組件之間的接口仍然是明確定義的，就像 prop 一樣。

實際上，你可以將依賴注入看作是“長距離的 prop”，除了：

• 父組件不需要知道哪些子組件使用了它 provide 的 property
• 子組件不需要知道 inject 的 property 來自哪里

#處理響應性

在上面的例子中，如果我們更改了 todos 的列表，這個變化并不會反映在 inject 的 todoLength property 中。這是因為默認情況下，provide/inject 綁定并不是響應式的。我們可以通過傳遞一個 ref property 或 reactive 對象給 provide 來改變這種行為。在我們的例子中，如果我們想對祖先組件中的更改做出響應，我們需要為 provide 的 todoLength 分配一個組合式 API computed property：

app.component('todo-list', {
  // ...
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
})

在這種情況下，任何對 todos.length 的改變都會被正確地反映在注入 todoLength 的組件中。在響應式計算和偵聽章節(jié)中閱讀更多關于 computed 的信息，以及在組合式 API 章節(jié)中閱讀更多關于 reactive provide/inject 的信息。