【Vue】$attrs,你可能不知道它!

項目中,你可能會遇到這樣一種場景: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

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