一、概念

vue官網(wǎng)定義如下：

包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過v-bind="$attrs"傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。

二、用處

vue中一個(gè)比較令人煩惱的事情是屬性只能從父組件傳遞給子組件。這也就意味著當(dāng)你想向嵌套層級(jí)比較深組件數(shù)據(jù)傳遞，只能由父組件傳遞給子組件，子組件再傳遞給孫子組件。

常用的幾個(gè)組件之間數(shù)據(jù)傳遞的方法有如下幾個(gè)：

1、通過 props 的方式向子組件傳遞(父子組件)

2、vuex 進(jìn)行狀態(tài)管理

3、非父子組件的通信傳遞 Vue Event Bus，使用Vue的實(shí)例，實(shí)現(xiàn)事件的監(jiān)聽和發(fā)布，實(shí)現(xiàn)組件之間的傳遞

4、$attrs的方式

三、示例

在vue中新建三個(gè)組件，分別為父組件(Father)，子組件(Son)和孫子組件(Grandson)。

父組件(Father)的代碼如下：

<template><div style="background: aquamarine"><div>Here is Father</div><son :sonAge=20 :grandsonAge=10