vue中的provide/inject的學習使用

來源：懂視網責編：小采時間：2020-11-27 22:15:02

vue中的provide/inject的學習使用

vue中的provide/inject的學習使用:前言最近在看element-ui的源碼，發現了一個這樣的屬性:inject.遂查看官網provider/inject provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。需要注意的是這里不論子組件有多深，只要調用了inj

推薦度：

點擊下載本文 文檔為doc格式

導讀vue中的provide/inject的學習使用:前言最近在看element-ui的源碼，發現了一個這樣的屬性:inject.遂查看官網provider/inject provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。需要注意的是這里不論子組件有多深，只要調用了inj

前言

最近在看element-ui的源碼，發現了一個這樣的屬性:inject.遂查看官網provider/inject

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

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

下面我們來驗證下猜想：

first：定義一個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這個變量。

second 定義一個子組件

<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 定義另一個子組件

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

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

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

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

運行之后看下結果