provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。是2.2.0版本 新增的。 這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。html
provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你能夠使用 ES2015 Symbols 做爲 key，可是隻在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工做。vue
inject 選項應該是： 一個字符串數組，或 一個對象，對象的 key 是本地的綁定名，value 是： 在可用的注入內容中搜索用的 key (字符串或 Symbol)，或 一個對象，該對象的： from 屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol) default 屬性是降級狀況下使用的 valueapi
使用場景：因爲vue有$parent屬性能夠讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。經過provide/inject能夠輕鬆實現跨級訪問祖先組件的數據數組
一種最多見的用法是刷新vue組件 app.vuebash
<template>
<div
id="app"
>
<router-view
v-if="isRouterAlive"
/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
MergeTipDialog,
BreakNetTip
},
data () {
return {
isShow: false,
isRouterAlive: true
},
// 父組件中返回要傳給下級的數據
provide () {
return {
reload: this.reload
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
複製代碼
<template>
<popup-assign
:id="id"
@success="successHandle"
>
<div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
<strong>將被分配給</strong>
<a
slot="reference"
class="unite-btn"
>
指派
</a>
</popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法
inject: ['reload'],
components: {
PopupAssign
},
methods: {
// ...mapActions(['freshList']),
async successHandle () {
this.reload()
}
}
}
</script>
複製代碼
這樣就實現了子組件調取reload方法就實現了刷新vue組件的功能,我的認爲它實現了組件跨越組件傳遞數據方法。 下面一個例子祖組件的數據，祖孫元素調取 Ancestor.vueapp
<template>
<div id="app">
</div>
</template>
<script>
export default {
data () {
return {
datas: [
{
id: 1,
label: '產品一'
},
{
id: 1,
label: '產品二'
},
{
id: 1,
label: '產品三'
}
]
}
},
provide {
return {
datas: this.datas
}
}
}
</script>
複製代碼
後代組件async
<template>
<div>
<ul>
<li v-for="(item, index) in datas" :key="index">
{{ item.label }}
</li>
</ul>
</div>
</template>
<script>
export default {
inject: ['datas']
}
</script>
複製代碼
後代元素引入被注入數據datas，並在組件內循環輸出ide
實際上，你能夠把依賴注入看做一部分「大範圍有效的 prop」，除了： 祖先組件不須要知道哪些後代組件使用它提供的屬性 後代組件不須要知道被注入的屬性來自哪裏函數
提示：provide 和 inject 綁定並非可響應的。這是刻意爲之的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的。ui