Vue3コンポーネントの実装のしやすさについて Vision.8
Vue3のコンポーネントの実装について、前回はVue3コンポーネントの詳細から、
propsの宣言について、まとめました。
前回:propsの宣言
今回は、props渡しの詳細を以下にまとめます。
Vue3のコンポーネントの詳細4
公式ページ:props渡しの詳細を読み進めながら、以下のように解釈。
-
props名の大文字・小文字: 長い名での大文字・小文字の使い分け名は
camelCase(キャメルケース)で宣言します。childComponent.vue<script setup> defineProps({ greetingMessage: String // ← camelCase(キャメルケース)で宣言 }) </script> <template> <span>{{ greetingMessage }}</span> </template>
親コンポーネントからのインポート例を以下に記載、この場合、DOM内テンプレート内
での使用とは異なり、親子コンポーネント感のpropsのやり取りでは、camelCaseを
使用することもできますが、常にkebab-case(ケバブケース)を用いて
HTMLの属性に揃える、以下のような表記が慣例となっています。parentComponent.vue<script setup> import GreetingMessage from './components/GreetingMessage.vue' </script> <template> <GreetingMessage greeting-message="表示したいメッセージ" /> </template>
-
静的/動的なprops:
静的なpropsは、これまで触れた通り、固定値をpropsに設定する実装となります。<AnyComponent title="My journey with Vue" />
動的なpropsは、
v-bind
またはそのショートカットである:
を使って
propsに設定する実装となります。<!-- 変数の値を動的に代入 --> <AnyComponent :title="post.title" /> <!-- 複雑な式の値を動的に代入 --> <AnyComponent :title="post.title + ' by ' + post.author.name" />
-
様々な型のprops:
propsには文字列以外の型も渡すことができます。- 数値
<!-- `42`は静的な値ですが、これが文字列ではなくJavaScriptの式で --> <!-- あることをVueに伝えるため、v-bindを用いる必要があります。 --> <AnyComponent :likes="42" /> <!-- 変数の値に動的に代入 --> <AnyComponent :likes="post.likes" />
- 真偽値
boolのデフォルト値がtrueになる点はよく覚えておく必要がありますね。
<!-- 値なしで props を指定すると、暗黙で `true`を指定したことになります。 --> <AnyComponent is-published /> <!-- `false`は静的な値ですが、これが文字列ではなくJavaScriptの --> <!-- 式であることをVueに伝えるため、v-bindを用いる必要があります。 --> <AnyComponent :is-published="false" /> <!-- 変数の値に動的に代入 --> <AnyComponent :is-published="post.isPublished" />
- 配列
<!-- 静的な配列でも、これが文字列ではなくJavaScriptの --> <!-- 式であることをVueに伝えるため、v-bindを用いる必要があります。 --> <AnyComponent :comment-ids="[234, 266, 273]" /> <!-- 変数の値に動的に代入 --> <AnyComponent :comment-ids="post.commentIds" />
- オブジェクト
<!-- 静的なオブジェクトでも、これが文字列ではなくJavaScriptの --> <!-- 式であることを Vue に伝えるため、v-bindを用いる必要があります。 --> <AnyComponent :author="{ name: 'Veronica', company: 'Veridian Dynamics' }" /> <!-- 変数の値に動的に代入します。 --> <AnyComponent :author="post.author" />
- 数値
-
複数の値を扱うprops:
オブジェクトに含まれるすべてのプロパティをpropsとして渡したい場合には
引数なしのv-bind
を使用します。例えば、オブジェクトの例として
以下のpostオブジェクトを<script setup>
内で宣言したとします。const post = { id: 1, title: 'My Journey with Vue' }
この時、テンプレート
<template>
内では、v-bindを利用して
postオブジェクトを直接、指定できます。<AnyComponent v-bind="post" />
上記は、各プロパティを個別に全てv-bindに記述した、以下例と等価となります。
<AnyComponent :id="post.id" :title="post.title" />
文字列以外をpropsに指定する時はv-bindを使用することが多そうなので
コードの見やすさ的にいつもv-bind
を省略せずに記述した方が分かりやすいのか
それとも、省略形と使い分けた方が良いのか、実装方針の検討所だと思いました。
放置しておくと、メンバー毎に書き方が、異なった実装が混在して、
何がどれだったか分からなくなりそうです。
次回:一方向のデータフロー