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}

}