Vue.js の基本 (9)

前回に引き続きコンポーネントを見ていきたいと思います。

以下のような、タイトルとメッセージを表示するというシンプルなHTML部品があったとします。



これをコンポーネント化してみたいと思います。コンポーネントにすると、こうなります。



一番はじめのHTMLがコンポーネントのテンプレートになり、そこに埋め込まれた {{ title }} と {{ message }} によって、コンポーネントのデータである title と message を表示しています。

ただ、実際にはこのコンポーネントの外から、表示するものを渡したいというケースがあるはずです。
その場合は **props** を設けることで、外から値を渡すことができるようになります。props はコンポーネントのプロパティと呼ばれ、data で定義するデータと同じようにテンプレートで使用することができます。



props: [‘title’, ‘message’] と定義することによって、 のようにタグの属性として値を指定することができるようになります。

このプロパティに、ただの文字列でなく、JavaScript の変数を渡したい場合にはどうすればよいでしょうか？

v-bind を使います。省略記法は : です。こうなります。



メインの Vue オブジェクトが持っている data の title と message をコンポーネントに渡し、コンポーネントでは受け取った値を表示しています。