Posted in 未分類

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

   Published Date: 2020年4月30日

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

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

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(コンポーネント名,{
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>

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

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

[Vueコンポーネント]

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

[Vue関数]

 <div id="app">
{{ message }}
</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;',
});

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

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

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>

[結果表示]
2020-04-30_21h17_42

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: {},
});

このようにすれば、「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>'
    }
  }
})

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



Author: webmaster