Vue中的attrs是一個自定義屬性對象，用在一個組件上來接收傳入的非prop屬性。當一個組件沒有定義某個prop時，這個屬性就會自動成為一個非聲明的prop。

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

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

然而這里也有一個非prop屬性 "title" 被傳遞了進來：

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

那么，attrs 對象就會變成這樣：

{
title: "a tooltip"
}

你可以在子組件內部綁定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 的時候應該注意的是，不應該修改 $attrs 中的內容。因為 $attrs 中的內容是自定義屬性的靜態列表，是用來保證正確的prop驗證和未知prop警告。