在Vue使用$attrs實現(xiàn)構(gòu)建高級組件

更新時間：2022年09月21日 14:45:07 作者：前端小智

本文我們主要來看下Vue3中的$attrs屬性。首先，我們會介紹它的用途以及它的實現(xiàn)與Vue2有哪些不兩同點，并通過事例來加深對它的理解

什么是 $attrs

對 $attrs 定義， Vue2 與 Vue3 是不一樣的，這里我們主要來介紹 Vue3 的版本：

$attrs 對象包含了除組件所聲明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 監(jiān)聽器等等。

$attrs 也可以被看作是一個安全網(wǎng)，它可以捕獲任何我們沒有在組件中聲明的東西。我們考慮一個只有一個屬性和事件處理程序的組件，如下所示：

<template>
??<h1?@click="$emit('custom',?'改變標題')">{{?title?}}</h1>
</template>
<script>
export?default?{
??name:?'Example',
??props:?['title'],
??emits:?['custom'],
}
</script>

如果在父組件中像下面這樣實例化上面的組件：

<template>
??<div?id="app">
????<SimpleEvent
??????id="myId"
??????class="myClass"
??????data-cy="cypress-testing"
??????@blur="onBlur"
??????title="測試$attrs"
??????description="沒有聲明?props"
??????@custom="onCustom"
????/>
??</div>
</template>

<script?setup>
import?SimpleEvent?from?'./components/Button.vue'

const?onBlur?=?()?=>?{
??//?todo
}
const?onCustom?=?()?=>?{
??//?todo
}

</script>

如果在組件中把 $attrs 打印出來，我們會得到如下內(nèi)容：

{
??id:?'myId',
??class:?'myClass',
??'data-cy':?'cypress-testing',
??description:?'沒有聲明?props',
??onBlur:?()?=>?{?//?todo?}?
}

上面這些信息，感覺沒啥用，其實不然，我們下面會介紹如何利用這些信息。

attrs V3 vs $attrs V2

這小節(jié)，我們來看下 Vue2 與 Vue3 中的 attrs 屬性的區(qū)別，先來看張圖：

與 Vue2 的區(qū)別主要有：

自定義事件放在 @listerner 對象中
不包含 class 屬性

而 Vue3 中的 attrs 對象包含了除組件所聲明的 props 和 emits 之外的所有其他 attribute，這有利于我們方便使用這些屬性。

下面我們來看些事例。

事例

事例地址

首先我們創(chuàng)建一個 Slider 組件，內(nèi)容如下所示：

<template>
??<input?
????type="range"??
????:value="modelValue"
????@input="$emit('update:modelValue',?$event.target.value)"
????class="slider__input"?/>
</template>

<script>
export?default?{
??name:?"Slider-1",
??props:?{
????modelValue:?[Number,?String],
??}
};
</script>
<style?lang="scss">
//?這里省略一堆樣式，自行看事例
</style>

上面代碼我們創(chuàng)建一個 slider，還實現(xiàn)了一個雙向綁定。然后可以像下面這樣使用該組件：

?<Slider-1?v-model="value"?/>

添加一些屬性

目前我們的 Slier 組件還很簡單，不太符合實際情況。所以，我們添加幾個屬性（min, max, class, id, data-cy, @keydown 和 aria-label）。

??<Slider-1
??????v-model="value"
??????min="0"
??????max="50"
??????class="blue_slider"
??????id="special_id"
??????data-cy="cypress-slider"
??????@keydown="()?=>?true"
??????aria-label="Example?slider"
????/>

運行后，通過控制檢查元素，我們可以看下，我們新加的屬性都被添加到了 HTML 元素上了：

看到這里，大家可能有疑問了，既然所有的 "非屬性/事件" 屬性都已經(jīng)自動應用于內(nèi)部的HTML元素，為什么還要對 $attrs 做這么大的介紹？

添加標題和值

新增需求：作為一個滑塊的使用者，用戶希望能夠看到一個標題，以及它在屏幕上顯示的數(shù)字形式的值。

我們在調(diào)整一下 Slider 組件，內(nèi)容如下：

//?Slider-2.vue

<template>
??<div?class="slider">
????<h1>{{?title?}}</h1>
????<input?
??????type="range"?
??????:value="modelValue"
??????@input="$emit('update:modelValue',?$event.target.value)"
??????class="slider__input"?/>
??????<div>Value:?{{?value?}}</div>
??</div>
</template>

<script>
export?default?{
??name:?"Slider-2",
??props:?{
????modelValue:?[Number,?String]
????title:?[String],
????value:?[Number,?String],
??}
};
</script>

乍一看，好像沒啥問題，但如果我們仔細觀察，可以看到有些東西是不對的。

首先，Slider 不是藍色的。第二，value 遠遠超過了50，最后，檢查一下HTML，會看到我們所有的額外屬性（min, max, data-cy）都被分配給了根元素，而不是我們的 input 元素。

解決上述問題的最好方法是找到一種方法，將所有的屬性、類、參數(shù)和事件直接 "應用" 到 input 字段上，而不需我們手動的一個個聲明。這就是 $attrs 出場的地方。

$attrs 救場

在本文的開頭，我們介紹了 $attrs。它是一個存放所有 "未聲明"的屬性和事件的地方，而這正是我們需要解決的問題。

要使用這個功能，我們只需將 $attrs 屬性應用于一個或多個HTML元素，使用 v-bind 操作符。

<template>
??<div?class="slider">
????<h1>{{?title?}}</h1>
????<input?
??????type="range"??
??????v-bind="$attrs"
??????:value="modelValue"
??????@input="$emit('update:modelValue',?$event.target.value)"
??????class="slider__input"?/>
??????<div>Value:?{{?modelValue?}}</div>
??</div>
</template>

在組件中，我們使用 attrs 充當橋梁，將所有的屬性（類、屬性、屬性和自定義事件）復制到一個或多個元素上。Slider 組件又回到了正常模式上了。