vue provide/inject 父組件如何給孫子組件傳值

一般情況下我們父子組件之間的傳值用的是props，這個就不多說了，但是如果想讓父組件給子組件的組件傳值怎么辦呢，如果還用props的話肯能會比較復雜，這里我們就可以用到 provide 和 inject（依賴注入），當然provide/inject也支持父子組件的傳值

provide/inject需要一起使用，我們可以從父組件的provide傳值，子組件或者孫組件，就可以用inject來接受子組件的provide屬性值

具體的可以看官網介紹provide/inject

下面我們可以寫個簡單的例子來演示一下

父組件parent，我們在里面引入了一個子組件provideChild

<template>
    <div>
        <button @click="add">點擊增加</button>
        <provideChild/>
    </div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
    components:{provideChild},
    data () {
        return {
            foo:5
        }
    },
    //依賴注入傳值
    provide(){
        return{
            newFoo:this.foo
        }
    },
    methods:{
        add(){
            this.foo ++
        },
    }
}
</script>

　　

子組件provideChild，我們同時又在子組件里面引入了一個他的子組件

我們可以看到他的打印出注入的newFoo值是5

<template>
<section>
    <div>我是子組件：{{newFoo}}</div>
    <childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
    components:{
        childChild
    },
    inject:['newFoo'],
    mounted(){
        console.log(this.newFoo)
    },
    
}
</script>

 

孫子組件childChild，是子組件的組件

<template>
    <div>我是子組件的組件：{{newFoo}}</div>
</template>
<script>
export default {
    inject:['newFoo'],
}
</script>

　　接下來我們可以看一下頁面的

是可以展示的出來的，但是我們點擊增加的時候，子組件們都沒有響應，如果此時你有好好看文檔的話，就應該猜出為什么了

provide必須是個對象inject的綁定值才可以響應，那么我們可以試一試

//parent父組件的寫法
<template>
    <div>
        <button @click="add">點擊增加</button>
        <provideChild/>
    </div>
</template>
<script>
import provideChild from '@/components/provideChild'
export default {
    components:{provideChild},
    data () {
        return {
            fooObj:{
                foo:5
            }
        }
    },
    //依賴注入傳值
    provide(){
        return{
            newFoo:this.fooObj
        }
    },
    methods:{
        add(){
            this.fooObj.foo ++
        },
    }
}
</script>

//子組件provideChild
<template>
<section>
    <div>我是子組件：{{newFoo.foo}}</div>
    <childChild/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
    components:{
        childChild
    },
    inject:['newFoo'],
    mounted(){
        console.log(this.newFoo)
    },
    
}
</script>

//孫子組件childChild
<template>
    <div>我是子組件的組件：{{newFoo.foo}}</div>
</template>
<script>
export default {
    inject:['newFoo'],
}
</script>

這樣我們就可以操作父組件的添加方法，得到子孫組件的響應