vue中的provide()和inject() 方法,实现父组件向子子孙孙组件传递数据的方法

1 provide()和inject() 可以实现嵌套组件之间的数据传递. 这两个函数只能在setup() 函数中使用. 父组件中使用 provide() 函数向下传递数据;  子组件中使用 inject() 获取上层传递过来的数据

 

2  父组件与孙组件之间共享普通数据

        父组件中:

        import {provide} from  '@vue/composition-api';

        setup(){

            //provide(名称,数据)

            provide('globalColor','red')

}

     孙组件中:

    import {inject} from '@vue/composition-api';

        setup(){

            //inject(名称)

           const color= inject('globalColor')

           return {color}

}

3  父组件与孙组件之间共享动态数据

        父组件中:

        import {provide} from  '@vue/composition-api';

        setup(){

            const  color=ref('pink')  // 这个color是个变量,也就是说个动态的可变数据, 这也是相对于普通数据唯一的区别.

            //provide(名称,数据)

            provide('globalColor',color)

}

     孙组件中:

    import {inject} from '@vue/composition-api';

        setup(){

            //inject(名称)

           const color= inject('globalColor')

        return {color}

}