Vue.js(v3)のpropsの使い方(親から子に値渡し）

Vue.jsでpropsを使用して値を受け渡す方法について書いています。
Vue.jsのバージョンは3で動作を確認しています。

公式のドキュメントも確認して、実際によく使いそうな書き方やハマりそうな箇所について解説しています。
公式のドキュメントはこちらに記載してあります。

propsとは？

Vueのpropsは親コンポーネントから子コンポーネントに値を渡すために使います。
子コンポーネントをタグとして記述する時に属性のような形で、渡す値を記載することが可能です。

こんな感じで書くと、userコンポーネントにuserNameという名前で値(“taro”)が受け渡されます。
userAgeには”18″が渡されます。

<user userName="taro" userAge="18"></user>

userコンポーネント自体は下記のように作成しました。(User.vue)

<template>
  <div>
    {{ userAge }}歳の{{ userName }}さん
  </div>
</template>
<script>
export default ({
  props: ['userAge', 'userName']
})
</script>

すると、このように表示されます。

コンポーネントの作成方法については、下記に書いてみたので確認してみてください。

propsを使って、実際にそれぞれの値を渡す方法をまとめてみました。
文字列・数値・配列・オブジェクトなど、いろいろな値を実際に渡して動作を確認してみました。

文字列をコンポーネントに渡す場合ですが
このように属性を書いて、直接文字列を渡すことが可能です。

<test stringText="hoge"></test>

また、変数に文字列を入れている場合で、値渡ししたい場合は下記のようにします。
textという変数に文字列が入っていて、それを子コンポーネントに渡しています。

<test :stringText="text"></test>

:はv-bind:の省略形です。

v-bindで数値を渡すと、数値としてコンポーネントに渡されます。

<test :number="999"></test>

または数値が入っている変数を渡します。

<test :number="testNumber"></test>

typeofを使うと型を確認できます。
下記のように数値として渡せていることが確認できました。

export default ({
  props: ['number'],
  setup(props) {
    console.log(typeof props.number) // コンソールにnumberが表示される
  },
})

v-bindを使って下記のように渡すことができます。

<test :array="['apple', 'grape', 'banana']" />

または配列が入っている変数を渡します。

<test :array="testArray" />

渡された内容はpropsで取得できます。

export default ({
  props: ['array'],
  setup(props) {
    console.log(props.array) // コンソールに配列の内容が表示される
  },
})

同じようにv-bindを使って下記のように渡すことができます。

<test :testObject="{ hoge:'fuga' }" />

またはオブジェクトの変数を渡します。

<test :testObject="testObject" />

他の値と同じように、下記のように受け取ることができます。

export default ({
  props: ['testObject'],
  setup(props) {
    console.log(props.testObject) // コンソールに「{ hoge:'fuga' }」が表示される
  },
}

既に簡単に説明しましたが、:はv-bind:の省略形です。
v-bindを使うと、渡した値や式の結果を型に合わせて渡してくれます。

式の結果も渡すことが可能なので、変数を合わせた結果を渡したりすることも可能です。
例えばtestNumberに10が入っていて、100と足した結果を渡した場合は110を子コンポーネントで取り出せます。

<test :number="testNumber + 100"></test>

v-bindを使わずに、stringTest="hoge"のように属性値に値を渡すと文字列として渡されます。

キャメルケースでもケバブケースでも渡すことができます。
例えばキャメルケースだと下記のように渡します。

<test stringText="test!" />

ケバブケースだと下記のように渡します。

<test string-text="test!" />

受け取るときもケバブケースでもキャメルケースでも大丈夫なようです。

export default ({
  props: ['stringText']
})
// または
export default ({
  props: ['string-text']
})

HTMLに直接テンプレートを書いて、コンポーネントを作成した場合にはケバブケースで渡す必要があるようでした。