vue.js中祖孙通信之provide与inject

vue的跨组件响应式通信

层层传递, vuex, provide

 

 

爷组件:

provide () {
    return {
        filterData: () => this.filterData
    };
},    

父组件:

可以完全用不到这个属性

 

子组件:

inject: {
    parentFilterData: 'filterData',
},
computed: {
    filterData () {
        return this.parentFilterData();
    }
},

 

这样写就可以做到响应式爷孙传递.

provide, inject仅在子孙组件中可以拿到父组件的属性