建站
咨詢
售后
建站咨詢
新聞中心
該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了吉安免費建站歡迎大家使用！
通常，當我們需要將數(shù)據(jù)從父組件傳遞到子組件時，我們使用 props。想象一下這樣的結(jié)構(gòu)：你有一些深嵌套的組件，而你只需要來自深嵌套子組件中父組件的某些內(nèi)容。在這種情況下，你仍然需要將 prop 傳遞到整個組件鏈中，這可能會很煩人。
對于這種情況，我們可以使用 provide 和 inject 對。父組件可以作為其所有子組件的依賴項提供程序，而不管組件層次結(jié)構(gòu)有多深。這個特性有兩個部分：父組件有一個 provide 選項來提供數(shù)據(jù)，子組件有一個 inject 選項來開始使用這個數(shù)據(jù)。
例如，如果我們有這樣的層次結(jié)構(gòu)：
Root
└─ TodoList
├─ TodoItem
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics 如果要將 todo-items 的長度直接傳遞給 TodoListStatistics，我們將把這個屬性向下傳遞到層次結(jié)構(gòu)：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: `
{{ todos.length }}
`
})
app.component('todo-list-statistics', {
inject: ['user'],
created() {
console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
}
})但是，如果我們嘗試在此處提供一些組件實例 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 轉(zhuǎn)換為返回對象的函數(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 一樣。
實際上，你可以將依賴注入看作是“l(fā)ong range props”，除了：
- 父組件不需要知道哪些子組件使用它提供的 property
- 子組件不需要知道
injectproperty 來自哪里
#處理響應性
在上面的例子中，如果我們更改了 todos 的列表，這個更改將不會反映在注入的 todoLength property 中。這是因為默認情況下，provide/inject 綁定不是被動綁定。我們可以通過將 ref property 或 reactive 對象傳遞給 provide 來更改此行為。在我們的例子中，如果我們想對祖先組件中的更改做出反應，我們需要為我們提供的 todoLength 分配一個組合式 API computed property：
app.component('todo-list', {
// ...
provide() {
return {
todoLength: Vue.computed(() => this.todos.length)
}
}
}) 在這種情況下，對 todos.length 將正確反映在組件中，其中“todoLength”被注入。在組合式 API 部分中閱讀關(guān)于 reactive provide/inject 的更多信息。
文章標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0提供/注入
URL鏈接：http://m.5511xx.com/article/cdhdhej.html
