vue中provide/inject使用案例分析

前言

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

provider/inject：簡(jiǎn)單的來(lái)說(shuō)就是在父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量。

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

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

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

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

在這里我們?cè)诟附M件中provide for這個(gè)變量。

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

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

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

<template>
 <p>
 {{demo}}
 </p>
</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í)，注入的值會(huì)在 props 和 data 初始化之后得到。

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

JavaScript DOM元素增刪改步驟詳解

Vue使用vee-validate驗(yàn)證表單步驟詳解

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