vue provide向子孙后代组件共享状态数据

之前我们介绍了父子组件通信，父子组件通信比较简单，父组件传递一个属性，子组件通过props接收这个属性，就能够成功获取到父组件的传值。如果子组件下面还有多个子孙组件要拿到祖先组件的数据呢？ 总不能通过父子组件传值的方式一直往下传吧？实际上当组件数据层级复杂了之后，则需要换一种传值的方式，vue 给我们提供了几种复杂情况下的传值方法，比如说可以使用状态管理库vuex ,还有就是我们今天要讲的provide/inject 。

什么是provide/inject

provide 是vue给我们提供的一个解决子孙组件获取祖先组件数据的方法。provide/inject 是成对出现的，provide 是复制在祖先组件里注入数据，inject是在子孙组件里收取数据。

祖先组件注入数据

export default {
    data(){
        return {
            name:'祖先name值'
        }
    }，
    provide(){
        return {
            name:this.name
        }
    }
}

子孙组件收数据

<template>
    <div>{{name}}</div>    
</template>
export default {
    inject:['name']
    data(){
        return{}
    }
}

provide 动态注入数据

通过回调的方式注入

export default {
    data(){
        return {
            list:[]
        }
    }，
    provide(){
        return {
            list:()=>this.list
        }
    },
    created(){
        setTimeout(()=>{
            this.list = [{"a":1}]
        },2000)
    }
}

inject 动态接收数据

通过计算属性的方式来执行函数

<template>
    <div>{{_list[0].a}}</div>    
</template>
export default {
    inject:['list']
    data(){
        return{}
    },
    computed:{
        _list(){
            return this.list()
        }
    }
}