Vue 3.0 提供/注入

該頁(yè)面假設(shè)你已經(jīng)閱讀過(guò)了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。

通常，當(dāng)我們需要將數(shù)據(jù)從父組件傳遞到子組件時(shí)，我們使用 props。想象一下這樣的結(jié)構(gòu)：你有一些深嵌套的組件，而你只需要來(lái)自深嵌套子組件中父組件的某些內(nèi)容。在這種情況下，你仍然需要將 prop 傳遞到整個(gè)組件鏈中，這可能會(huì)很煩人。

對(duì)于這種情況，我們可以使用 provide 和 inject 對(duì)。父組件可以作為其所有子組件的依賴(lài)項(xiàng)提供程序，而不管組件層次結(jié)構(gòu)有多深。這個(gè)特性有兩個(gè)部分：父組件有一個(gè) provide 選項(xiàng)來(lái)提供數(shù)據(jù)，子組件有一個(gè) inject 選項(xiàng)來(lái)開(kāi)始使用這個(gè)數(shù)據(jù)。

例如，如果我們有這樣的層次結(jié)構(gòu)：

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

如果要將 todo-items 的長(zhǎng)度直接傳遞給 TodoListStatistics，我們將把這個(gè)屬性向下傳遞到層次結(jié)構(gòu)：TodoList -> TodoListFooter -> TodoListStatistics。通過(guò) 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
  }
})

但是，如果我們嘗試在此處提供一些組件實(shí)例 property，則這將不起作用：

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

要訪(fǎng)問(wèn)組件實(shí)例 property，我們需要將 provide 轉(zhuǎn)換為返回對(duì)象的函數(shù)

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

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

實(shí)際上，你可以將依賴(lài)注入看作是“l(fā)ong range props”，除了：

• 父組件不需要知道哪些子組件使用它提供的 property
• 子組件不需要知道 inject property 來(lái)自哪里

#處理響應(yīng)性

在上面的例子中，如果我們更改了 todos 的列表，這個(gè)更改將不會(huì)反映在注入的 todoLength property 中。這是因?yàn)槟J(rèn)情況下，provide/inject 綁定不是被動(dòng)綁定。我們可以通過(guò)將 ref property 或 reactive 對(duì)象傳遞給 provide 來(lái)更改此行為。在我們的例子中，如果我們想對(duì)祖先組件中的更改做出反應(yīng)，我們需要為我們提供的 todoLength 分配一個(gè)組合式 API computed property：

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

在這種情況下，對(duì) todos.length 將正確反映在組件中，其中“todoLength”被注入。在組合式 API 部分中閱讀關(guān)于 reactive provide/inject 的更多信息。