Vue.jsのpropsにString以外を渡す方法
2024/01/28
propsにはコロンを付けない**静的なprops**とコロンを付ける**動的なprops**の2つがあります。
```html
<!-- 静的に値を代入 -->
<BlogPost title="My journey with Vue" />
<!-- 変数の値を動的に代入 -->
<BlogPost :title="post.title" />
<!-- 変数を使わずに動的に値を代入 -->
<BlogPost :title="My journey with Vue" />
```
**静的に値を代入する方法**では渡した値がすべて`String`として解釈されてしまうため、`String`以外の値を渡したい場合は注意が必要です。**動的に値を代入する方法**を用いると、値はJavaScriptの式として評価されるため、様々な型の値を渡すことができます。
```html
<!-- `false`は文字列として評価される -->
<BlogPost is-published="false" />
<!-- `false`はJavaScriptの式として評価される -->
<BlogPost :is-published="false" />
```
[公式ドキュメント](https://ja.vuejs.org/guide/components/props#passing-different-value-types)に数値、真偽値、配列、オブジェクトの例があるので、詳しく知りたい方は参照してください。