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" />

真偽値

<!-- 値なしで props を指定すると、暗黙で `true`を指定したことになります。 -->
<AnyComponent is-published />

<!-- `false`は静的な値ですが、これが文字列ではなくJavaScriptの -->
<!-- 式であることをVueに伝えるため、v-bindを用いる必要があります。 -->
<AnyComponent :is-published="false" />

<!-- 変数の値に動的に代入 -->
<AnyComponent :is-published="post.isPublished" />

boolのデフォルト値がtrueになる点はよく覚えておく必要がありますね。

配列

<!-- 静的な配列でも、これが文字列ではなく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を省略せずに記述した方が分かりやすいのか
それとも、省略形と使い分けた方が良いのか、実装方針の検討所だと思いました。
放置しておくと、メンバー毎に書き方が、異なった実装が混在して、
何がどれだったか分からなくなりそうです。

次回：一方向のデータフロー

初心者から見たVue3コンポーネントの実装のしやすさについて Vision.8

Vue3コンポーネントの実装のしやすさについて Vision.8

Vue3のコンポーネントの詳細4