快捷導(dǎo)航

Vue封裝組件利器之$attrs、$listeners的使用

更新時(shí)間：2021年12月28日 10:47:58 作者：畢了業(yè)就退休

vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下

前言

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

$attrs

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

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

inheritAttrs 屬性官網(wǎng)鏈接

2.4.0 新增

類型：boolean

默認(rèn)值：true

詳細(xì)：

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

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

例子：

父組件

<template>
  <my-input
      required
      placeholder="請(qǐng)輸入內(nèi)容"
      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>

子組件中沒(méi)有接受父組件中傳過(guò)來(lái)的值，也沒(méi)有綁定，但是有v-bind="$attrs"這個(gè)屬性，他會(huì)自動(dòng)接受并綁定

inheritAttrs: false

inheritAttrs: true

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

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

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

// 父組件
<template>
  <my-input
      required
      placeholder
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from './child'
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('focus', $event)"
        @input="$emit('input', $event)"
    />
  </div>
</template>

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

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

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

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

使用場(chǎng)景

組件傳值時(shí)使用：爺爺在父親組件傳遞值，父親組件會(huì)通過(guò)$attrs獲取到不在父親props里面的所有屬性，父親組件通過(guò)在孫子組件上綁定$attrs 和 $listeners 使孫組件獲取爺爺傳遞的值并且可以調(diào)用在爺爺那里定義的方法；

對(duì)一些UI庫(kù)進(jìn)行二次封裝時(shí)使用：比如element-ui，里面的組件不能滿足自己的使用場(chǎng)景的時(shí)候，會(huì)二次封裝，但是又想保留他自己的屬性和方法，那么這個(gè)時(shí)候時(shí)候$attrs和$listners是個(gè)完美的解決方案。