元件屬性

6 分鐘

HTML 元素是建立頁面的建置組塊。您可以藉由將屬性設定為不同的值，來設定這些元素的行為。如先前所述，建立元件的程序與建立自訂 HTML 標籤相仿。因此，您可以透過屬性傳入資訊，以強化重複使用元件的效益。

定義屬性

props 是 properties 的簡稱 (中譯為屬性)，是一組可傳入元件的值。您通常會將屬性新增至元件，以傳入元件應顯示的值，或變更其行為。

您可以在 script 元素內新增 props 欄位，藉以定義元件的屬性。您可以列出元件屬性的名稱，方法是在陣列中將其列出：

<!-- UserDisplay component -->
<script>
export default {
    name: 'UserDisplay',
    props: ['name', 'age']
}
</script>

元件的呼叫者會使用與 HTML 屬性相同的語法來設定屬性。採用前述的元件，我們可依照下列方式設定 name 和 age：

<!-- inside parent component -->
<template>
    <user-display name='Cheryl' age='28'></user-display>
</template>
<script>
import UserDisplay from './UserDisplay.vue';
export default {
    components: {
        UserDisplay
    }
}
</script>

值 Cheryl 和 28 會透過屬性繫結分別繫結至 name 和 age 屬性。

注意

Vue.js 會將名為 UserDisplay 的元件轉換成 kebab-case user-display。

限制類型

呼叫者可以將任何類型的值列為陣列的一部分，以傳入這些值。此方法可能適用於基本應用程式，但您很可能會想要指出每個屬性應有的資料類型。

您可以藉由定義結構描述來提供更健全的屬性相關資訊。如果您想要指出 name 應為字串，而 age 應為數值，您可以定義內容結構描述，如下所示：

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        name: String,
        age: Number
    }
}
</script>

請留意您將如何建立具有 name 和 age 類型的屬性物件。此元件現在只會接受指定的資料類型。您仍可像之前一樣加以設定：

<!-- inside parent component -->
<user-display name='Cheryl' age='28'></user-display>

但是，如果您將資料類型設定為與結構描述不相符的值 (例如，將數值傳至 name)，則會在主控台中收到警告。警告會要求您採取動作。

複雜物件

在使用 Vue 時，您通常會使用物件，而不是個別的值。幸運的是，您可以使用屬性來宣告複雜結構。

如果您要使用具有屬性 name 和 age 的 User 物件，您可以在屬性中將此物件宣告為完整建構：

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

您可以像之前一樣使用屬性來設定值。此外，您可以指定您要使用的物件名稱，以傳入動態資料。在下列範例中，名稱 user 的一項資料會使用與靜態值相同的語法來傳遞：

<!-- parent component -->
<template>
<user-display :user="user"></user-display>
</template>

<script>
import UserDisplay from './UserDisplay.vue';
export default {
    data() {
        return {
            user: {
                firstName: 'Cheryl',
                age: 28
            }
        }
    },
    components: {
        UserDisplay
    }
}
</script>

在元件內使用屬性

在元件內，您可以與使用讀取資料相同的方式來讀取屬性。完整的 UserDisplay 元件可能會顯示如下：

<template>
    <div>Name: {{ user.name }}</div>
    <div>Age: {{ user.age }}</div>
</template>
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

重要

不同於具狀態資料，透過屬性傳遞的值是單向繫結。如果對某個屬性進行變更，這些更新並不會擴及父代。

元件屬性

定義屬性

限制類型

複雜物件

在元件內使用屬性

意見反應