コンポーネント prop

6 分

HTML 要素は、ページを作成するための構成要素です。それらの動作を構成するには、属性を別の値に設定します。前に説明したように、コンポーネントの作成はカスタム HTML タグの作成と似ています。そのため、props を介してコンポーネントの再利用を強化するための情報を渡すことができます。

prop を定義する

prop は properties の略で、コンポーネントに渡すことができる値のセットです。一般には prop をコンポーネントに追加して、表示する値を渡したり、あるいは動作を変更したりします。

コンポーネントの prop を定義するには、script 要素の内部に props フィールドを追加します。コンポーネントの prop の名前を一覧表示するには、それらを配列の中に記入します。

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

コンポーネントの呼び出し元は、HTML 属性と同じ構文を使用して prop を設定します。前のコンポーネントを想定して、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 プロパティに、属性バインドを通じてバインドされます。

Note

Vue.js によって UserDisplay という名前のコンポーネントがケバブケースの user-display に変換されます。

型を制限する

呼び出し元は、任意の型の値を、配列の一部として一覧表示して渡すことができます。このメソッドは基本的なアプリケーションに適していますが、各 prop で予期されるデータ型を示すことが必要な場合がよくあります。

prop に関する、より堅牢な情報を提供するには、スキーマを定義します。 name を文字列に、age を数値にすることを示したい場合は、prop スキーマを次のように定義します。

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

prop オブジェクトを name および age の型で作成している方法に注目してください。このコンポーネントは、指定されたデータ型しか受け付けなくなりました。これらを以前のように設定することもできます。

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

ただし、name に数値を渡した場合など、データ型をスキーマと一致しない値に設定した場合は、コンソールに警告が表示されます。警告では、対処するよう求められます。

複合オブジェクト

Vue を操作しているときは、通常は個々の値でなく、オブジェクトを操作します。幸いにも、prop を使用して複雑な構造を宣言できます。

name と age のプロパティを持つ User オブジェクトを使用している場合、このオブジェクトを prop で完全な構造として宣言できます。

<!-- 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>

prop をコンポーネント内で使用する

コンポーネント内で、データを読み取るのと同じ方法で prop を読み取ることができます。 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>

重要

ステートフルデータとは異なり、prop を介して渡される値は一方向のバインドです。 prop に変更が加えられると、これらの更新は親にバブルバックされません。

コンポーネント prop

prop を定義する

型を制限する

複合オブジェクト

prop をコンポーネント内で使用する

フィードバック