コンポーネントとは？
HTML,CSS,javaScript等をセットにして特定の機能を持つセットという部品として切り出すことができるVue.jsの機能のことです。
コンポーネントのメリット
- 必要なコードをすぐに見つけることができる。
- 1つの機能をメンテナンスするために複数ファイル見なくてよくなる。
- 再利用性が上がり開発効率が向上する。
コンポーネントのメカニズム
いわば、設計図でプロパティやアクションを定義しておけます。
そこから生成されたものを「インスタンス」と呼びます。Javaのクラスのような存在のことですね。
コンポーネントの利用例
例えば、商品サイトで下記のパーツはほとんど作りが同じなのに、文言だけ異なるということはよくあると思います。
- 新着商品
- おすすめ商品
コンポーネントの種類
コンポーネントには、下記の2種類が存在します。現実的には影響範囲が広がらないようにローカルコンポーネントの方がよく使われています。
- グローバルコンポーネント
- ローカルコンポーネント
グローバルコンポーネント
特徴
全てのVueインスタンス呼び出しで、コンポーネントを有効にします。
構文（カスタムタグ方式）
最も一般的なコンポーネントの定義方式です。
|
1 |
Vue.component(コンポーネントの名前,コンポーネントの定義情報) |
構文（サブコンストラクタ方式）
コンストラクタベースのコンポーネント定義になります。基本的には上のカスタムタグ方式でコンポーネントを定義すれば良いと思いますが、コンポーネントのマウント自体を制御したい場合はこちらを使うと良いでしょう。
|
1 2 3 4 5 |
const コンポーネント名 = Vue.extend({コンポーネントの定義情報}) //コンポーネントの使い方1 new コンポーネント名().$mount('親コンポーネント名') //コンポーネントの使い方2 Vue.component('コンポーネント名',コンポーネント名) |
ローカルコンポーネント
特徴
- 特定のVueインスタンス配下でしか利用しないことがわかっている場合にはこちらを利用します。
- また、グローバルだと何かしらトラブルやコードの複雑化に繋がるのでそれを回避する目的でも使えます。
構文
|
1 2 3 4 5 6 7 8 9 10 |
const ローカルコンポーネント名 = { template:'HTML' } new Vue({ el: 'DOM', components: { 'test-component': ローカルコンポーネント名 } }) |
グローバルコンポーネントを簡単に実装する。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <comp-test></comp-test> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> Vue.component('comp-test', { template: '<p>componentテスト</p>' }) new Vue({ el: '#app' }) </script> </body> </html> |
コンポーネントは、ルートインスタンスが作成される前に定義する必要があります。なので、必ず「new Vue」する前に定義するようにしましょう。
実行結果
ローカルコンポーネントを簡単に実装する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <local-comp></local-comp> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> //Vue.extendによるサブコンストラクタ方式の構文により置き換えることも可能です。 var MyHello = { template: '<div>ローカルコンポーネント</div>' }; new Vue({ el: '#app', components: { 'local-comp': MyHello } }); </script> </body> </html> |
SFC(.vueファイル)から別のSFC(.vue)をローカル登録する。
実務ではSFC(.vueファイル)では下記のように別のSFCをローカル登録して使っていくことになります。下記のようにimportした上でローカル登録をする必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> |
この記事へのコメントはありません。