認識vue中的$attrs和$listeners屬性，聊聊用法

這篇文章帶大家了解一下vue中封裝元件利器：$attrs、$listeners屬性，看看它們的用法，希望對大家有幫助！

多層級元件巢狀需要傳遞資料時，通常使用的方法是透過vuex。但只是傳遞數據，不做中間處理，使用 vuex 處理，未免有些大材小用了。所以就有了 $attrs 、 $listeners兩個屬性 ，通常是搭配 inheritAttrs 一起使用。 【相關推薦：vuejs影片教學】

$attrs

• #從父元件傳給自訂子元件的屬性，如果沒有prop 接收會自動設定到子元件內部的最外層標籤上，如果是class 和style 的話，會合併最外層標籤的class和style。
• 如果子元件中不想繼承父元件傳入的非prop 屬性，可以使用inheritAttrs 停用繼承，然後透過v-bind="$ attrs" 把外部傳入的非prop 屬性設定在希望的標籤上，但是這不會改變class 和style#。

inheritAttrs 屬性

#2.4.0 新增

官網連結https://cn .vuejs.org/v2/api/#inheritAttrs

• 類型：boolean

##預設值
• ：

  true

  #詳細說明預設情況下父作用域的不被認定為props 的attribute 綁定(attribute bindings) 將會「回退」且作為普通的HTML attribute 應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。透過設定 inheritAttrs 到 false

  ，這些預設行為將會被去掉。而透過 (同樣是 2.4 新增的) 實例 property 

  $attrs 可以讓這些 attribute 生效，且可以透過 v-bind 顯性的綁定到非根元素上。 注意：這個選項不影響

   
class

 和 

style 綁定。

範例：

#父元件

<template>
  <my-input
      required
      placeholder="请输入内容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from &#39;./child&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    MyInput
  }
}
</script>

子元件

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

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

子元件中沒有接受父元件中傳過來的值，也沒有綁定，但是有

v-bind="$attrs"這個屬性，他會自動接受並綁定

inheritAttrs: false

inheritAttrs: true

• $listeners (官網解釋)

### ##########listeners###: 包含了父作用域中的(不含 ###.native### 修飾器的) ###v-on### 事件監聽器。它可以透過 ###v-on="$listeners"### 傳入內部元件－在創建更高層次的元件時非常有用。 #########先上程式碼：這裡只舉例###focue###、###input###兩個原生事件###

// 父组件
<template>
  <my-input
      required
      placeholder
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from &#39;./child&#39;
export default {
  components: {
    MyInput
  },
  methods: {
    onFocus (e) {
      console.log(e.target.value)
    },
    onInput (e) {
      console.log(e.target.value)
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        @focus="$emit(&#39;focus&#39;, $event)"
        @input="$emit(&#39;input&#39;, $event)"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

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

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

###這樣一行程式碼就能解決綁定所有的原生事件的問題######【相關推薦：《###vuejs教學###》、《###web前端###》】###

以上是認識vue中的$attrs和$listeners屬性，聊聊用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！