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

# Vue3コンポーネントの実装のしやすさについて Vision.8
Vue3のコンポーネントの実装について、前回はVue3コンポーネントの詳細から、
propsの宣言について、まとめました。

前回：propsの宣言

https://qiita.com/babel_0101/items/8cf494b6e283fd4aafc4

今回は、props渡しの詳細を以下にまとめます。
## Vue3のコンポーネントの詳細4
公式ページ：[props渡しの詳細](https://ja.vuejs.org/guide/components/props.html#prop-passing-details)を読み進めながら、以下のように解釈。

1. **props名の大文字・小文字:** 長い名での大文字・小文字の使い分け名は<br>**camelCase**（キャメルケース）で宣言します。

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

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

https://qiita.com/babel_0101/items/2b1a5b72d973343540c8