Vue.jsのPropsは、コンポーネント間でデータを渡すための仕組みです。親コンポーネントから子コンポーネントにデータを渡す際に使用されます。以下に、Vue.jsのPropsについて詳しく説明します。
1. Propsの定義
子コンポーネントでは、受け取るデータをprops
オプションで定義します。これはオブジェクト形式で、各プロパティが受け取るデータの名前と型を指定します。
Vue.component('child-component', {
props: {
// 型のみ指定
message: String,
// 型とデフォルト値を指定
count: {
type: Number,
default: 0
},
// 必須プロパティ
isActive: {
type: Boolean,
required: true
},
// カスタムバリデーション
user: {
type: Object,
validator: function (value) {
return value !== null && typeof value.name === 'string'
}
}
},
template: '<div>{{ message }} {{ count }} {{ isActive }} {{ user.name }}</div>'
});
2. Propsの使用
親コンポーネントから子コンポーネントにデータを渡すには、HTML属性のようにPropsを指定します。
<child-component
message="Hello, Vue!"
:count="10"
:is-active="true"
:user="{ name: 'John' }">
</child-component>
3. Propsの型とバリデーション
Propsの型は以下のように指定できます:
- String
- Number
- Boolean
- Array
- Object
- Function
- Symbol
さらに、バリデーション関数を使用して、よりカスタムなバリデーションを行うことができます。これは、validator
オプションを使用して行います。
4. Propsの監視
Propsはリアクティブなデータであるため、変更があれば自動的に再レンダリングされます。必要に応じて、Propsの変更を監視するために、watch
オプションを使用することもできます。
Vue.component('child-component', {
props: ['message'],
watch: {
message(newVal, oldVal) {
console.log(`message changed from ${oldVal} to ${newVal}`);
}
}
});
5. Propの受け渡しの注意点
- 親コンポーネントのデータを直接変更しない:Propsは一方向データフローを維持するため、子コンポーネントから直接変更することは避けるべきです。
- デフォルト値の設定:必要に応じてデフォルト値を設定し、Propが渡されなかった場合に備えます。
まとめ
PropsはVue.jsにおけるコンポーネント間のデータ通信をシンプルかつ効果的に行うための重要な機能です。適切に使用することで、再利用可能で管理しやすいコンポーネントを作成できます。
コメント