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