Component traditional values provide inject vue how to parent component sub-assemblies

Under normal circumstances we pass values ​​between father and son are using props, this is not to say, but if you want a parent to pass the value of the component sub-assemblies of how to do it, where we can provide used and inject (dependency injection )

provide / inject designed for use with, we can pass from the value of the parent Provide assembly, subassembly or component Sun, can be used to accept Provide inject property value subassembly

Tell me what can introduce specific network provide / inject

Now we can write a simple example to demonstrate what

Parent component parent, we introduced a sub-assemblies inside 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>

　　

Subassemblies provideChild, at the same time we introduced a sub-assemblies inside his assembly

We can see newFoo value of 5 to print out his injection

<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>

 

Grandson components childChild

< Template > 
    < div > I subassembly components: newFoo {{}} </ div > 
</ Template > 
< Script > 
Export default { 
    Inject: [ ' newFoo ' ], 
} 
</ Script >

　　Next we can look at page

Can show up, but when we click on the increase, sub-assemblies who are not responding at this time if you have a good look at the document, they should guess why

provide a value binding object must be before they can inject response, then we can try

//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>

这样我们就可以操作父组件的添加方法，得到子孙组件的响应