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)に数値、真偽値、配列、オブジェクトの例があるので、詳しく知りたい方は参照してください。