Vue 父子元件資料傳遞( inheritAttrs + $attrs + $listeners)

當我們在書寫 vue 元件的時候，也許可能會用到資料傳遞；將父元件的資料傳遞給子元件，有時候也需要通過子元件去事件去觸發父元件的事件；

每當我們遇到這樣的需求的時候，我們總是會想到有三種解決辦法：

1. 通過 props 的方式向子元件傳遞(父子元件)

2. vuex 進行狀態管理(父子元件和非父子元件) vuex

3. 非父子元件的通訊傳遞 Vue Event Bus，使用Vue的例項，實現事件的監聽和釋出，實現元件之間的傳遞。

後來再逛社群的時候我又發現了還有第四種傳遞方式，inheritAttrs + $attrs + $listeners

附上原文連結Vue2.4版本中新新增的attrs以及listeners屬性使用 和 Vue.js最佳實踐（五招讓你成為Vue.js大師）

基本是大部分的公司或者專案都是用前面兩種，我司也不例外；好像曾經在官方文件看到過，vuex 適合用在大型的專案中。第三種方式我曾在我的畢設中用到過，其他地方我好像目前是沒有看到，當時只有一個功能需要在兄弟元件之間傳遞資料，用 vuex 的話，大材小用，另外還需要時間成本。所以我選擇了Vue Event Bus；最後一種方式的話，我目前還沒有看到過在專案的應用。但是我個人覺得既然有這個 api 那肯定是有他存在的道理。不然它存在還有何意義的？？如果有需求我個人覺得可以嘗試用一用；擁抱變化，擁抱機會

工作之後發現，碰到 bug 有時候常規的方式，並不一定是最好的。跳出常規思維，跳出常規方式去解決問題，可能會更加好。常規方法能夠解決問題但是未免有些臃腫。在實踐的採坑中體會更有意思

inheritAttrs + $attrs + $listeners

inheritAttrs ：預設是 true

我的解釋就是：沒有被子元件繼承的父元件屬性，不會當做特性展示在子元件根元素上面。說起來，聽起來好像有些拗口，看截圖看程式碼你就明白了

inheritAttrs :false

inheritAttrs :false

c='ture1.png'>

官方解釋：預設情況下父作用域的不被認作 props 的特性繫結 (attribute bindings) 將會“回退”且作為普通的 HTML 特性應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。通過設定 inheritAttrs到 false，這些預設行為將會被去掉。而通過 (同樣是 2.4 新增的) 例項屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的繫結到非根元素上。

$attrs

我的解釋就是：存放沒有被子元件繼承的的資料物件；看看圖

官方文件解釋：包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)。當一個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高階別的元件時非常有用。

$listeners

我的理解就是：子元件可以觸發父元件的事件（不需要用什麼那些麻煩的vuex或者一個空的 Vue 例項作為事件匯流排，或者又是什麼vm.$on )

官方文件解釋：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部元件——在建立更高層次的元件時非常有用。

最後一個總結

後續補上例子