【Vue.js】コンポーネントとデータの受け渡し

今日の記事では、Vue.jsのコンポーネントについて解説していきます。

コンポーネントを使う

コンポーネントを使って、青色のアラートを表示するwebサイトを作ってみました。

コンポーネントを使うには3つのコードが必要になります。

  • コンポーネントのテンプレート
  • コンポーネントのオブジェクト
  • コンポーネントの利用

コンポーネント、テンプレート、オブジェクトと難しい単語がたくさん出てきました。

順番に解説していきますね。

コンポーネントのテンプレート

コンポーネントのテンプレートは、scriptタグにtype=”text/x-template”を指定しその中にHTMLタグを記述します。

idはオブジェクト側でも使うので必ず指定します。今回の場合は、fuga-templateがテンプレート名になります。

Vue.jsの変数を使う場合には、rawステートメントで囲みます。

コンポーネントのオブジェクト(スクリプト)

コンポーネントのオブジェクトは、Vue.componentと言うメソッドを使って作成します。

引数にはコンポーネント名と情報を格納したオブジェクトを指定します。

今回のコンポーネント名はfugaです。

オブジェクトには「template」と言う値が用意されており、コンポーネントの表示に使うテンプレート名(fuga-template)を記述します。

コンポーネントの利用

コンテナでコンポーネントを利用するには、以下のようにコンポーネント名を記載します。

データを利用する

コンポーネントのオブジェクトで定義した値をテンプレートに渡してみます。

dataプロパティは関数である点に注意しましょう。

こんな感じ!

おわり。