項目中,你可能會遇到這樣一種場景:A組件嵌套B組件,B組件嵌套C組件,現在需要將A組件的數據傳遞到C組件,該怎麼做?
我們一般會想到兩種方法:1、使用props將數據從A傳遞給B,再由B傳遞給C。2、使用vuex。
使用props逐層傳遞太過繁瑣,使用vuex又有些大材小用。下面將由本文的主角$attrs來教你另一種實現!
使用props進行數據傳遞是這樣的:
如果我們不在子組件中通過props接收,父組件綁定在子組件上的屬性會添加到子組件的根元素上
vue爲我們提供了$attrs這一對象,用來接收父組件傳遞過來且沒有使用props接收的屬性。
想要傳入一個對象的所有property(屬性),vue爲我們提供了v-bind=""這種語法糖。
結合$attrs與v-bind=""即可將父組件傳遞過來的數據傳遞給孫子組件,在孫子組件使用props進行接收,就能方便快捷的實現父組件傳遞數據給孫子組件這一功能!
補充:因爲B組件(兒子組件)沒有使用props接收,所以傳遞的參數會添加在B組件的根元素上。由於我們給B組件綁定了一個title屬性,會導致鼠標懸停在B組件上有title提示! 如果我們不希望組件的根元素繼承 這些attribute,我們可以在組件的選項中設置inheritAttrs: false
。