前言

最近在看element-ui的源碼，發(fā)現(xiàn)了一個(gè)這樣的屬性:inject.遂查看官網(wǎng)provider/inject

provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。

需要注意的是這里不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來獲取數(shù)據(jù)。

下面我們來驗(yàn)證下猜想：

first：定義一個(gè)parent component

<template>
 <div>
<childOne></childOne>
 </div>
</template>

<script>
 import childOne from '../components/test/ChildOne'
 export default {
 name: "Parent",
 provide: {
 for: "demo"
 },
 components:{
 childOne
 }
 }

在這里我們在父組件中provide for這個(gè)變量。

second 定義一個(gè)子組件

<template>
 <div>
 {{demo}}
 <childtwo></childtwo>
 </div>
</template>

<script>
 import childtwo from './ChildTwo'
 export default {
 name: "childOne",
 inject: ['for'],
 data() {
 return {
 demo: this.for
 }
 },
 components: {
 childtwo
 }
 }
</script>

third 定義另一個(gè)子組件

<template>
 <div>
 {{demo}}
 </div>
</template>

<script>
 export default {
 name: "",
 inject: ['for'],
 data() {
 return {
 demo: this.for
 }
 }
 }
</script>

在2個(gè)子組件中我們使用jnject注入了provide提供的變量for，并將它提供給了data屬性。

這里官網(wǎng)注明例子只工作在 Vue 2.2.1 或更高版本。低于這個(gè)版本時(shí)，注入的值會在 props 和 data 初始化之后得到。

運(yùn)行之后看下結(jié)果

從上面這個(gè)例子可以看出，只要在父組件中調(diào)用了，那么在這個(gè)父組件生效的生命周期內(nèi)，所有的子組件都可以調(diào)用inject來注入父組件中的值。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com