前言

最近在看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 初始化之后得到。

運行之后看下結果

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

總結

以上是生活随笔為你收集整理的vue中的provide/inject的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。