首先祖先給子孫後代傳遞也是可以用props傳遞,一層層傳遞,爺爺給孫子還好,但是嵌了五六層還這麼寫,就顯得非常麻煩了。
所以就用到了provide(提供)和inject(注入)。這兩個是配套使用的,以允許祖先向所有祖先後代注入一個依賴。
- provide: 是一個對象或者是一個返回對象的函數。裏面就是所有要給後代的東西,也就是一對對屬性和值
- inject: 一個字符串數組或者是一個對象,屬性值也可以是一個對象,包含了from和default默認值。
用法就是在父組件裏面通過provide注入想要注入的數據,再在後代組件中通過inject注入這些數據,然後直接使用。
1、父親傳兒子的簡單案例如下:
//son.vue文件
2、上面是父親傳兒子,下面是父子傳孫子,而且provide的數據是從data對象裏面取得。父親傳孫子的時候中間文件son如果不用provide提供的數據的話就不用inject注入數據。同時自己有試着直接將父親文件裏面的provide裏面的數據拿着去父親模板裏面用,但是是不能直接用的。
//Father文件
//son文件
//grandson文件