$attrs的使用


作用:$attrs可父子孫一脈相傳(父系)的組件間的通信

可以用於高級多層組件間的封裝

  • 父子通信:
    如果是父子組件之間的通信,在父組件傳給子組件的數據,可用props來進行接收。如果不用props接收,父組件傳過來的數據會在$attrs里面

  • 父子孫通信
    父組件的傳給子組件的數據,子組件可以用props來接收,props沒有接收完的的數據會在$attrs中,孫組件要想接收這個數據可以在子組件中加入v-bind='$attrs'來傳給孫子組件。這樣孫子組件就可以接收它爺爺過來的數據了。

$attrs中包含的數據=(父組件總的傳過來的數據-子組件props接收的數據)

$attrs的方便之處在於數據一層一層的傳下去,不用每一層都用props接收之后再傳給后面的組件。可以直接加一個v-bind='$attrs'就可以傳下去了

image

上圖中父組件傳了很多數據給子組件有 tableItems,menu,menuTochild等等

image
image

子組件中用porps接收了很多父組件傳過來的數據,但是沒有用props接收menu的數據,父組件也傳了pageContent給孫組件,孫組件也沒有用porps來接收pageContent

image

所以孫組件中的$attrs中包含了父組件的menu,和子組件的pageContent,其它的數據都被props接收走,沒有到$attrs中


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM