今回はVue.jsのコンポーネントの使い方についてです。Vue関数の使い方、変数の使い方を理解したら、コンポーネントを学んでステップアップしましょう。
[Vue関数・変数の使い方は下記記事をどうぞ！]
[Vue.js] HelloWorldを表示してみる
Vueコンポーネントについて
一般的にホームページを作るときにはヘッダー、フッター、サイドバー、コンテンツ部分と幾つかのパーツに分けることができます。ヘッダー、フッター、サイドバーはどのページでも同じものを表示し、コンテンツ部分がページ毎に変化するケースが多いと思います。同じものを何度も記載することを避け、一度作ったものを複数ヶ所で利用するための仕組みが「コンポーネント」です。Vueの公式ページのコンポーネントの説明も「コンポーネントは再利用可能なVueインスタンス」となっています。
コンポーネントを使わないでホームページを作っていくと、ヘッダーやフッターはページごとに記載しなければならず、ヘッダーの中身を変更する場合には何ページ分も作業する必要性が出てきます。これはとても効率が悪いですし、ミスも増えます。
「コンポーネント」はウェブを作成するには必須の機能とも言えます。
コンポーネントの学習のポイントは下記の2点になります。
・コンポーネントの登録
・コンポーネントでのデータの受け渡し
Vueコンポーネントの使い方
公式ページに掲載されているサンプルソースを見てみましょう。
これがコンポーネントの登録方法です。
|
0 1 2 3 4 5 6 7 8 9 |
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) |
サンプルソースの構成を簡潔にしてみますと、下記のようになります。
template : ‘表示内容’
})
公式ページのサンプルはbutton-counterというVueコンポーネントを作り、データのcountを0に設定、template:で出力する内容を指定しています。公式ページのサンプルの前に、もっと簡単なプログラムを作成してみます。
コンポーネントでHello World
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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コンポーネント]
|
0 1 2 3 4 |
<div id="app"> <hello-world></hello-world> </div> |
[Vue関数]
|
0 1 2 3 4 |
<div id="app"> {{ message }} </div> |
Vue関数は{{変数名}}という記載で、この部分に指定した文字列が表示されていました。Vueコンポーネントは <hello-world></hello-world>の部分に指定した文字列（HTMLタグ）が表示されるようになります。<hello-world></hello-world>自体が変数のようなイメージで良いでしょう。
Vueコンポーネントは書式に従って下記のように記載します。
|
0 1 2 3 4 |
Vue.component('hello-world', { template: '<h1>Hello World</h1>', }); |
hello-worldコンポーネントを作り、h1タグで囲まれたHello Worldをセットします。
これだけだとどこに表示したらよいかの指定が無いので、Vue関数に学習したときと同様に下記を記載します。
|
0 1 2 3 4 5 |
var app = new Vue({ el: '#app', data: {}, }); |
これでdiv idの名前がappの場所に、テンプレートを表示することができます。
複数のVueコンポーネント
サイトを構築するときは複数のVueコンポーネントを使います。hello-worldコンポーネントを2回表示、新たにhello-world2コンポーネントを作り、こちらも2回表示させてみます。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
[結果表示]
Vueコンポーネントを動的に利用
templateの中にh1タグと文字を入力しておく使い方は「静的」です。実用的にするには表示させる内容を「動的」にしたいですね。
Hello Worldの部分をJavaScriptの変数で指定してみます。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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インスタンスの中にコンポーネントを記載します。
|
0 1 2 3 4 5 6 7 8 9 10 11 |
var app = new Vue({ el: '#sample', data: { }, components: { 'hello-world': { template: '<h1>Hello World</h1>' } } }) |
こちらはidがsampleには表示できますが、idがappのVueインスタンスを作ってそちらに表示させようとしてもできません。グローバルは複数のインスタンスを作って違うidに同じものを表示させることができます。
