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

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

コンポーネントを使う

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

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

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

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

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

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

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

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

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

{% raw %}
<script type="text/x-template" id="fuga-template">
    <p class="alert alert-primary h5">
        自分で定義したコンポーネントを表示するよ。
    </p>
</script>
{% endraw %}

コンポーネントのオブジェクト（スクリプト）

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

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

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

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

Vue.component('fuga', {
    template: '#fuga-template',
});

コンポーネントの利用

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

<div id="hoge" class="m-5">
    <fuga />
</div>

データを利用する

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

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

{% raw %}
<script type="text/x-template" id="fuga-template">
    <p class="alert alert-primary h5">
        {{ msg }}
    </p>
</script>
{% endraw %}

<script>
Vue.component('fuga', {
    template: '#fuga-template',
    data:function(){
        return { msg: "コンポーネントのオブジェクトからテンプレートに値を渡してみたよ！" }
    }
});

こんな感じ！

おわり。