vue組件之祖孫傳後代provide和inject

首先祖先給子孫後代傳遞也是可以用props傳遞,一層層傳遞,爺爺給孫子還好,但是嵌了五六層還這麼寫,就顯得非常麻煩了。
所以就用到了provide(提供)和inject(注入)。這兩個是配套使用的,以允許祖先向所有祖先後代注入一個依賴。

  • provide: 是一個對象或者是一個返回對象的函數。裏面就是所有要給後代的東西,也就是一對對屬性和值
  • inject: 一個字符串數組或者是一個對象,屬性值也可以是一個對象,包含了from和default默認值。
    用法就是在父組件裏面通過provide注入想要注入的數據,再在後代組件中通過inject注入這些數據,然後直接使用。

1、父親傳兒子的簡單案例如下:

//father.vue文件
在這裏插入圖片描述

//son.vue文件
在這裏插入圖片描述
2、上面是父親傳兒子,下面是父子傳孫子,而且provide的數據是從data對象裏面取得。父親傳孫子的時候中間文件son如果不用provide提供的數據的話就不用inject注入數據。同時自己有試着直接將父親文件裏面的provide裏面的數據拿着去父親模板裏面用,但是是不能直接用的。

//Father文件
在這裏插入圖片描述
//son文件
在這裏插入圖片描述
//grandson文件
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章