Vue中的attrs是一個(gè)自定義屬性對(duì)象，用在一個(gè)組件上來(lái)接收傳入的非prop屬性。當(dāng)一個(gè)組件沒有定義某個(gè)prop時(shí)，這個(gè)屬性就會(huì)自動(dòng)成為一個(gè)非聲明的prop。

該對(duì)象包含傳遞給組件的所有非特定prop(non-specific prop)。例如，假設(shè)一個(gè)組件有prop定義name, age和gender。如果父組件使用了如下代碼，

<my-component v-bind:name="John" v-bind:age="30" v-bind:gender="male"></my-component>

然而這里也有一個(gè)非prop屬性 "title" 被傳遞了進(jìn)來(lái)：

<my-component v-bind:name="John"
v-bind:age="30"
v-bind:gender="male"
title="a tooltip">
</my-component>

那么，attrs 對(duì)象就會(huì)變成這樣：

{
title: "a tooltip"
}

你可以在子組件內(nèi)部綁定attrs中的屬性在你的模板中。

<template>
<div>
<span v-bind:title="attrs.title">
This is the tooltip.
</span>
</div>
</template>
<script>
export default {
props: ["name", "age", "gender"],
computed: {
additionalInfo() {
// 從組件的props中篩選出attrs中不存在的屬性。
const { name, age, gender, ...rest } = this.$attrs;
return rest;
},
}
};
</script>

使用 $attrs 的時(shí)候應(yīng)該注意的是，不應(yīng)該修改 $attrs 中的內(nèi)容。因?yàn)?$attrs 中的內(nèi)容是自定義屬性的靜態(tài)列表，是用來(lái)保證正確的prop驗(yàn)證和未知prop警告。