九九、vue组件的依赖注入

子组件可以用this.$parent访问父组件的实例，孙子组件可以用this.$parent.$parent来访问，那曾孙子组件呢，是不是要写很多个$parent。

如果父组件下很多个子孙组件都要用祖先组件中的一个数据，这时候就要用到组件的依赖注入。

依赖注入，是通过provide inject 这两选项实现，provide是写在祖先组件中，inject是写在需要注入的子孙组件中。
provide选项应该是一个对象或返回一个对象的函数.
inject 选项应该是一个字符串数组或一个对象

对象的key是本地的绑定名，value是provide的 key (字符串或 Symbol)。
value也可以是个一个对象，该对象的：
from 属性是provide的 key (字符串或 Symbol)
default属性是在form定义的key在provide中未定义，使用的默认值。

祖先组件

<template>
    <div>
        <son></son>
    </div>
</template>
<script>
    export default{
        data(){
            return {}
        },
        provide(){
            return{
                top:20,
            }
        },
        components:{
            son:resolve => require(['./son.vue'],resolve)
        }
    }
</script>

son儿子组件

<template>
    <div>
        <grandson></grandson>
    </div>
</template>
<script>
    export default{
        data(){
            return {}
        },
        inject:['top'],
        components:{
            grandson:resolve => require(['./grandson.vue'],resolve)
        },
        mounted(){
            console.log(this.top)//20
        }
    }
</script>

grandson儿子组件

<template>
    <div></div>
</template>
<script>
    export default{
        data(){
            return {}
        },
        inject:{
            top:{
                from:'top',
                default:'30'
            },
            bottom:{
                from:'bottom',
                default:'30'
            }
            
        },
        components:{
            grandson:resolve => require(['./grandson.vue'],resolve)
        },
        mounted(){
            console.log(this.top)//20
            console.log(this.bottom)//30
        }
    }
</script>

---

最后推荐一个 js常用的utils合集，帮我点个star吧~

• github
• 文档