作用:$attrs可父子孫一脈相傳(父系)的組件間的通信
可以用於高級多層組件間的封裝
-
父子通信:
如果是父子組件之間的通信,在父組件傳給子組件的數據,可用props來進行接收。如果不用props接收,父組件傳過來的數據會在$attrs里面 -
父子孫通信
父組件的傳給子組件的數據,子組件可以用props來接收,props沒有接收完的的數據會在$attrs中,孫組件要想接收這個數據可以在子組件中加入v-bind='$attrs'
來傳給孫子組件。這樣孫子組件就可以接收它爺爺過來的數據了。
$attrs中包含的數據=(父組件總的傳過來的數據-子組件props接收的數據)
$attrs的方便之處在於數據一層一層的傳下去,不用每一層都用props接收之后再傳給后面的組件。可以直接加一個v-bind='$attrs'
就可以傳下去了
上圖中父組件傳了很多數據給子組件有 tableItems,menu,menuTochild等等
子組件中用porps接收了很多父組件傳過來的數據,但是沒有用props接收menu的數據,父組件也傳了pageContent給孫組件,孫組件也沒有用porps來接收pageContent
所以孫組件中的$attrs中包含了父組件的menu,和子組件的pageContent,其它的數據都被props接收走,沒有到$attrs中