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" 傳入內部組件——在建立更高層次的組件時很是有用。

最後一個總結

後續補上例子