目錄

• 前言
• $attrs
• 例子：
• $listeners (官網解釋)
• 使用場景
• 總結

前言

多級元件巢狀需要傳遞資料時，通常使用的方法是通過x。但僅僅是傳遞資料，不做中間處理，使用 vuex 處理，未免有些大材小用了。所以就有了 $attrs 、 $listeners兩個屬性 ，通常配合 inheritAttrs 一起使用。

$attrs

從父元件傳給自定義子元件的屬性，如果沒有 prop 接收會自動設定到子元件內部的最外層標籤上，如果是 class 和 style 的話，會合並最外層標籤的 class 和 style。

如果子元件中不想繼承父元件傳入的非 prop 屬性，可以使用 inheritAttrs 禁用繼承，然後通過 v-bind="$attrs" 把外部傳入的 非 prop 屬性設定給希望的標籤上，但是這不會改變 class 和 style。

inheritAttrs 屬性 官網連結

2.4.0 新增

型別：boolean

預設值：true

詳細：

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

注qGTiyblY意：這個選項不影響 class 和 style 繫結。

例子：

父元件

<template>
  <my-input
      required
      placeholder="請輸入內容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from './child'
export default {
  name: 'parent',components: {
    MyInput
  }
}
</script>

子元件

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',inheritAttrs: false
}
</script>

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

inheritAttrs: false

inheritAttrs: true

$listeners (官網解釋)

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

先上程式碼：這裡只舉例focue、input兩個原生事件

// 父元件
<template>
  <my-input
      required
      placeholderhttp://www.cppcns.com
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from './child'
export default {
  components: {
    MyInput
  },methods: {
    onFocus (e) {
      console.logwww.cppcns.com(e.target.value)
    },onInput (e) {
      console.log(e.target.value)
    }
  }
}
</script>

// 子元件
<template>
  <div>
    <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        @focus="$emit('focus',$event)"
        @input="$emit('input',$event)"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',inheritAttrs: false
}
</script>

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

 <input
        type="text"
        v-bind="$attrs"
        class="form-control"
+       v-on="$listeners"
-       @focus="$emit('focus',$event)"
-       @input="$emit('input',$event)"
    />

這樣一行程式碼就能解決繫結所有的原生事件的問題

使用場景

元件傳值時使用： 爺爺在父親元件傳遞值，父親元件會通過$attrs獲取到不在父親props裡面的所有屬性，父親元件通過在孫子元件上繫結$attrs 和 $listeners 使孫元件獲取爺爺傳遞的值並且可以呼叫在爺爺那裡定義的方法；

對一些UI庫進行二次封裝時使用：比如element-ui，裡面的元件不能滿足自己的使用場景的時候，會二次封裝，但是又想保留他自己的屬性和方法，那麼這個時候時候$attrs和$listners是個完美的解決方案。

總結

到此這篇關於Vue封裝元件利器之$attrs、$listeners使用的文章就介紹到這了,更多相關Vue封裝元件$attrs、$listeners使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！