[Vue.js] コンポーネントを使ってパーツを再利用

今回はVue.jsのコンポーネントの使い方についてです。Vue関数の使い方、変数の使い方を理解したら、コンポーネントを学んでステップアップしましょう。

[Vue関数・変数の使い方は下記記事をどうぞ！]
[Vue.js] HelloWorldを表示してみる

Contents

1 Vueコンポーネントについて
2 Vueコンポーネントの使い方
3 コンポーネントでHello World
4 複数のVueコンポーネント
5 Vueコンポーネントを動的に利用
6 Vueコンポーネントのグローバルとローカル

Vueコンポーネントについて

一般的にホームページを作るときにはヘッダー、フッター、サイドバー、コンテンツ部分と幾つかのパーツに分けることができます。ヘッダー、フッター、サイドバーはどのページでも同じものを表示し、コンテンツ部分がページ毎に変化するケースが多いと思います。同じものを何度も記載することを避け、一度作ったものを複数ヶ所で利用するための仕組みが「コンポーネント」です。Vueの公式ページのコンポーネントの説明も「コンポーネントは再利用可能なVueインスタンス」となっています。

コンポーネントを使わないでホームページを作っていくと、ヘッダーやフッターはページごとに記載しなければならず、ヘッダーの中身を変更する場合には何ページ分も作業する必要性が出てきます。これはとても効率が悪いですし、ミスも増えます。

「コンポーネント」はウェブを作成するには必須の機能とも言えます。
コンポーネントの学習のポイントは下記の2点になります。
・コンポーネントの登録
・コンポーネントでのデータの受け渡し

Vueコンポーネントの使い方

公式ページに掲載されているサンプルソースを見てみましょう。

これがコンポーネントの登録方法です。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('button-counter', {

data: function () {

return {

}

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

})

サンプルソースの構成を簡潔にしてみますと、下記のようになります。

Vue.component(コンポーネント名,{
template : ‘表示内容’
})

公式ページのサンプルはbutton-counterというVueコンポーネントを作り、データのcountを0に設定、template:で出力する内容を指定しています。公式ページのサンプルの前に、もっと簡単なプログラムを作成してみます。

コンポーネントでHello World

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue hello world!(component ver)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <hello-world></hello-world>
    </div>
    <script>
      Vue.component('hello-world', {
        template: '<h1>Hello World</h1>',
      });

      var app = new Vue({
        el: '#app',
        data: {},
      });
    </script>
  </body>
</html>

<html>

<head>

<title>vue hello world!(component ver)</title>

</head>

<body>

<hello-world></hello-world>

</div>

Vue.component('hello-world', {

});

var app = new Vue({

el: '#app',

data: {},

});

</script>

</body>

</html>

Vue関数とVueコンポーネントでは表示部分「divとid」の中身が変わります。

Vueコンポーネントではコンポーネント名を以下のように指定することにより、HTMLの中で使えるようになります。
下記にVueコンポーネントとVue関数の出力部分のソースを記載します。

[Vueコンポーネント]

  <div id="app">
    <hello-world></hello-world>
</div>

<hello-world></hello-world>

</div>

[Vue関数]

 <div id="app">
{{ message }}
</div>

</div>

Vue関数は{{変数名}}という記載で、この部分に指定した文字列が表示されていました。Vueコンポーネントは <hello-world></hello-world>の部分に指定した文字列（HTMLタグ）が表示されるようになります。<hello-world></hello-world>自体が変数のようなイメージで良いでしょう。

Vueコンポーネントは書式に従って下記のように記載します。

Vue.component('hello-world', {
   template: '&lt;h1&gt;Hello World&lt;/h1&gt;',
});

Vue.component('hello-world', {

});

hello-worldコンポーネントを作り、h1タグで囲まれたHello Worldをセットします。

これだけだとどこに表示したらよいかの指定が無いので、Vue関数に学習したときと同様に下記を記載します。

var app = new Vue({
    el: '#app',
    data: {},
 });

var app = new Vue({

el: '#app',

data: {},

});

これでdiv idの名前がappの場所に、テンプレートを表示することができます。

複数のVueコンポーネント

サイトを構築するときは複数のVueコンポーネントを使います。hello-worldコンポーネントを2回表示、新たにhello-world2コンポーネントを作り、こちらも2回表示させてみます。

  <div id="app">
      <hello-world></hello-world>
      <hello-world></hello-world>
      <hello-world2></hello-world2>
      <hello-world2></hello-world2>
    </div>
    <script>
      Vue.component('hello-world', {
        template: '<h1>Hello World</h1>',
      });

      Vue.component('hello-world2', {
        template: '<h1>Hello World2</h1>',
      });

      var app = new Vue({
        el: '#app',
        data: {},
      });
    </script>

<hello-world></hello-world>

<hello-world2></hello-world2>

</div>

Vue.component('hello-world', {

});

Vue.component('hello-world2', {

});

var app = new Vue({

el: '#app',

data: {},

});

</script>

[結果表示]

Vueコンポーネントを動的に利用

templateの中にh1タグと文字を入力しておく使い方は「静的」です。実用的にするには表示させる内容を「動的」にしたいですね。

Hello Worldの部分をJavaScriptの変数で指定してみます。

    <hello-world></hello-world>
</div>
<script>
let text = 'Hello World!';
Vue.component('hello-world', {
    template: '<h1>' + text + '</h1>',
});

var app = new Vue({
    el: '#app',
    data: {},
});

<hello-world></hello-world>

</div>

let text = 'Hello World!';

Vue.component('hello-world', {

});

var app = new Vue({

el: '#app',

data: {},

});

このようにすれば、「let text = ‘Hello World!’;」の部分を変更すれば、表示される文字が変更できます。このように文字や数字を変数に代入して動的な表示を実現します。

Vueコンポーネントのグローバルとローカル

Vueコンポーネントにはグローバルとローカルという2つの指定方法があります。今までの例（Vue.componentを利用）はグローバルになります。こちらは別のコンポーネントでも利用することができます。

特定のコンポーネントだけで利用する場合は、Vueインスタンスの中にコンポーネントを記載します。

var app = new Vue({
  el: '#sample',
  data: {
  },
  components: {
    'hello-world': {
      template: '<h1>Hello World</h1>'
    }
  }
})

var app = new Vue({

el: '#sample',

data: {

components: {

'hello-world': {

}

})

こちらはidがsampleには表示できますが、idがappのVueインスタンスを作ってそちらに表示させようとしてもできません。グローバルは複数のインスタンスを作って違うidに同じものを表示させることができます。

SearchLight