vue中的$attrs和$listeners屬性及用法是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司于2013年開始，先為和順等服務(wù)建站，和順等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為和順企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

多級組件嵌套需要傳遞數(shù)據(jù)時(shí)，通常使用的方法是通過vuex。但僅僅是傳遞數(shù)據(jù)，不做中間處理，使用 vuex 處理，未免有些大材小用了。所以就有了 $attrs 、 $listeners兩個屬性 ，通常配合 inheritAttrs 一起使用。

$attrs

• 從父組件傳給自定義子組件的屬性，如果沒有 prop 接收會自動設(shè)置到子組件內(nèi)部的最外層標(biāo)簽上，如果是 class 和 style 的話，會合并最外層標(biāo)簽的 class 和 style。

• 如果子組件中不想繼承父組件傳入的非 prop 屬性，可以使用 inheritAttrs 禁用繼承，然后通過 v-bind="$attrs" 把外部傳入的 非 prop 屬性設(shè)置給希望的標(biāo)簽上，但是這不會改變 class 和 style。

inheritAttrs 屬性

2.4.0 新增

官網(wǎng)鏈接 https://cn.vuejs.org/v2/api/#inheritAttrs

• 類型：boolean

• 默認(rèn)值：true

• 詳細(xì)：

  默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個目標(biāo)元素或另一個組件的組件時(shí)，這可能不會總是符合預(yù)期行為。通過設(shè)置 inheritAttrs 到 false，這些默認(rèn)行為將會被去掉。而通過 (同樣是 2.4 新增的) 實(shí)例 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的綁定到非根元素上。

  注意：這個選項(xiàng)不影響class 和 style 綁定。

例子：

父組件

子組件

子組件中沒有接受父組件中傳過來的值，也沒有綁定，但是有v-bind="$attrs"這個屬性，他會自動接受并綁定

inheritAttrs: false

inheritAttrs: true

$listeners (官網(wǎng)解釋)

• listeners: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

先上代碼：這里只舉例focue、input兩個原生事件

// 父組件

// 子組件

這樣綁定原生事件很麻煩，每一個原生事件都需要綁定，但用v-on="$listeners"就會省事很多

這樣一行代碼就能解決綁定所有的原生事件的問題

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。