VUE进阶 - provide 与 inject

provide / inject理解

vue官方文档解释：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide / inject运用场景

和prop类似，那为什么还需要provide / inject呢？
因为在现实的项目中，我的一个组件嵌套着好几层组件，如果运用prop一层层的嵌套传递，就非常的麻烦。而provide / inject就解决了这个问题，只要在顶层父级provide里声明对象或方法，那么下一层级无论多深都能够通过inject来访问到provide的数据。

执行顺序
data
provide
created
mounted

示例代码 - 简单的传值

//index页面
<template>
    <view>
        index
        <ac></ac>
    </view>
</template>

<script>
    import ac from "./a"
    export default {
        provide: {
            foo: {
                "a":1,
                "b":"你好"
            }
        },
        components:{ac}
    }
</script> 

//a组件
    import bc from "./b"
    export default {
        //屏蔽2行代码，b也能收到值
        inject: ['foo'],
        created() {
            console.log("a:",this.foo)  
        },
        components:{bc}
    }

//b组件
    export default {
        data() {
            return {
                msg:""
            }
        },
        inject: ['foo'],
        created() {
            this.msg=this.foo.b 
        } 
    }

示例代码 - 传函数

//app.vue
<script>
    export default {  
        provide(){
            return {
                foo:this.test
            }
        }, 
        onLaunch: function() {
            console.log('onLoad:')
        },
        onShow: function() {
            console.log('onShow:')
        },  
        methods:{
            test(e){
                console.log("app_vue:",e) 
            }
        }
    }
</script>
 


//index页面 
    <view>  
        <ac></ac>
    </view> 
<script>
    import ac from "./a"
    export default {  
        components:{ac},    
        methods:{           
        }
    }
</script> 

//a页面 
    <view>
        <view @click="sub">a组件click</view>
        <bc></bc>
    </view> 
<script>
    import bc from "./b"
    export default { 
        //屏蔽2行代码，b也能收到值
        inject: ['foo'],
        components:{bc},        
        methods:{ 
            sub(){
                this.foo("a")
            }           
        }
    }
</script> 

//b页面 
    <view>
        <view @click="sub">b组件click</view>
    </view>
<script> 
    export default { 
        inject: ['foo'],
        methods:{
            sub(){
                this.foo("b")
            }           
        }
    }
</script> 

provide / inject缺点

1.无法追踪数据的来源
在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。
2.导致组件间的耦合
它将导致组件于组件间的耦合，使得组件复用性受到影响。