こんにちは。
Vue.jsのコンポーネントを使ってみました。
Vue.jsのコンポーネントはなんとなくどういうものかは知っていたのですがいざちゃんと使おうとしたら色々迷ってしまったのでこの度改めて勉強してみました。
基本的には公式ドキュメントを参考に勉強しました。時間はかかりましたが徐々に理解をしてきたので自分なりに誰でもわかるように今回頑張って説明してみようと思います。（自分が理解しているか確認が目的）
ちなみにこちらが公式↓
https://jp.vuejs.org/index.html
コンポーネントのページ↓
https://jp.vuejs.org/v2/guide/components.html
まずコンポーネントとは？？
使い回せるパーツを作ってサイト全体で使いまわしちゃえーーって解釈しています。
この使い回せるパーツというのは見た目に関わるもの全てだと思っています。逆に見た目が関わらない、つまり処理または機能だけのものはVueのモジュールを使うべきかなと思っています。Vueのモジュールについては今回はノータッチです。
例えば、グローバルヘッダー。
大体のサイトはサイト全体でヘッダーが変わったりしない。全く同じデザインのヘッダーを全ページで使うと思います。
このヘッダーをコンポーネントにしちゃうとか。
例えば、テキストフィールドのフォーム。テキストフィールドに文字を入力したら何か特別な処理があって（入力中に不正な文字列を検知して赤くなるとか？？）それは色々な箇所で使われるとか。
この特別なテキストフィールドをコンポーネントにして使う。
このような用途だと思っています。
では、
コンポーネントにすることで何がいいのか？
- 楽
- デザインが統一できる
- 複雑な処理2度と書かなくてすむ
楽が一番うれしいです。楽するためのコンポーネントだと思うので楽です。一度作ってしまえば呼び出すだけ、修正が必要ならコンポーネント自体を修正するだけでサイト全体のコンポーネントの箇所が修正されたことになるので楽ちんです。
同じものをいろんなところで使っているのでデザインやレイアウトがブレることがなくなります。
そして複雑な処理を要するものをもう一度書かなくて済むのでこれまた楽なのと保守性も上がります。
コンポーネントの使い方
まず使い方ですが
全て公式ドキュメントに書いてあります！！！！
なのでそれを読んでくださいなんて言ったら元も子もないので私なりに解釈して私なりにわかりやすく説明してみます。
コンポーネントを登録
まずコンポーネントを使えるように、つまり一部のパーツを使い回せるようにするにはコンポーネントの登録をします。
そしてこの登録方法には２つあります。”グローバル”と”ローカル”の２つです。
グローバルに登録をするとVueのrootインスタンスが初期化された時(`new Vue`)をされた時に登録されたコンポーネントが必ず呼ばれます。なのでなんでもかんでもグローバルに登録してしまうと登録したコンポーネントが全て呼ばれてしまうので、不要なコンポーネントが交じる可能性があり公式では推奨をしていません。
次にローカルに登録するパターンですが、こちらは必要な時に必要なコンポーネントを呼び出すことが出来ます。グローバルのときと違って何もしなければコンポーネントを使うことが出来ません。
後に具体的な使い方は記述しますが、イメージとしては変数にセットしといて使いたい時にその変数を呼ぶといったイメージです。
まず登録の二通りの説明でした。次に具体的に書き方を説明したいと思います。
基本的な書き方です。
コンポーネントの基本構文
グローバルのほう
Vue.component('alert-hoge-button', {
data: function() {
return {
hoges: []
}
},
template: '<button v-on:click="alertHoge">ほげ！！</button>',
methods: {
alertHoge: function() {
this.$data.hoges.unshift("hoge");
alert(this.$data.hoges);
}
},
})
Vue.component("コンポーネント名", {オプションたち})
これが登録の仕方です。”コンポーネント名”の部分が呼び出す時に使う名前なのでこのコンポーネントが何をしているのか分かりやすい名前にすると良いでしょう。
“オプションたち”に任意のオプションを追加。今回の例では、”data”、”template”、”methods”があります。
ここでの重要なポイントは２つで、まず”data”の部分。ここは関数でなくてはいけません。なんでか知らんけど。
とにかく関数でなくては動作しないのでfunction + return {}で書いて上げましょう。
次に重要なのが”template”の箇所ですね。
この中に使い回すパーツを書いて上げましょう。今回の例で言うとボタンを押したら「hoge!!」って言うだけのボタン。コンポーネントを呼び出した時に実際に表示されるものがここに書かれます。
もっと複雑な要素の場合はどうするの？？と思うかもしれませんがそれは後で書きますので(´・ω・｀)
で呼び出し方
// index.js
new Vue({
el: "#vue-sample",
})
<!-- index.html --> <div id="vue-sample"> <alert-hoge-button></alert-hoge-button> </div>
これだけです。グローバルで登録されているのでVueのrootインスタンス上であればいつでもHTML内で呼び出すことが出来ます。呼び出すときはコンポーネントに書いた名前をタグ名として使うだけです。
ローカルのほう
先程はグローバルの登録の仕方でしたが今度はローカルの方です。
基本的な書き方は一緒なのですが登録の仕方だけ違います。
`Vue.component()`でグローバル登録でしたがここを変えてあげましょう。
// 変数に入れる
var alertHogeButton = {
data: function() {
return {
hoges: []
}
},
template: '<button v-on:click="alertHoge">ほげ！！</button>',
methods: {
alertHoge: function() {
this.$data.hoges.unshift("hoge");
alert(this.$data.hoges);
}
},
};
new Vue({
el: "#sample",
data: {
number: 0
},
// コンポーネントの変数を読み込む
components: {
'alert-hoge-button': alertHogeButton
},
methods: {
clear: function () {
this.$data.number = 0;
}
}
})
あとはHTML側で同じ用にタグを呼ぶだけです。
大きな違いは変数に入れているところ。使いたいコンポーネントをrootで読んであげる。
こうすことで使いたい時に呼び出すことができるようになります。
もっと複雑なとき
実際にサイトを作ろうとしたときに<button v-on:click="alertHoge">ほげ！！</button>のような簡単なHTML要素だけではないはず。
もっと複雑に入れ子になったHTML要素をまとめてコンポーネント化したいって時のお話。
そういうときはx-template、またはvueのtemplateタグを使うと良いです。
x-template
x-templateはhtmlファイルに以下のように書き込みます
<script type="text/x-template id="component-name">
<div>
<button v-n:click="alertHoge">押して</button>
</div>
</script>
scriptタグのtype属性にx-templateを指定。idをつける。
このidをVueコンポーネントで呼び出す。
Vue.component('alert-hoge-button', {
data: function() {
return {
hoges: []
}
},
template: '#component-name',
methods: {
alertHoge: function() {
this.$data.hoges.unshift("hoge");
alert(this.$data.hoges);
}
},
})
templateタグ
.vueという拡張子のファイルを使うとtemplateとというタグが使える。
// alert-component.vue
<template>
<div>
<button v-n:click="alertHoge">押して</button>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
hoges: []
}
},
template: '#component-name',
methods: {
alertHoge: function() {
this.$data.hoges.unshift("hoge");
alert(this.$data.hoges);
}
},
}
</script>
このファイルを読み込んでrootのVueにこのコンポーネントを使いますと宣言をするだけです。
import alertComponent from 'path/alert-component.vue'
new Vue({
el: "#sample",
components: { alertComponent },
template: '<alert-component></alert-component>'
})
これでHTMLでいつでもコンポーネントを呼び出すことができます。
コンポーネントのテンプレートの呼び出し方は他にもrender関数やなんやらあるのですが、ここでは割愛とします。（まだ自分も勉強中の身分のため）
まとめ
ずらーっと自分が最近ちゃんと勉強したVueのコンポーネントのまとめでした。
Vue.jsは割と難易度低めでなんかかっこいい実装ができるので楽しいです。
これからも引き続き勉強するので次の記事もどんどん上げて行こうと思います。
今回はコンポーネントの登録方法のみの記事でした。
最後まで読んでいただきありがとうございました。m(_ _)m
あ、公式ドキュメントをちゃんと読むことをおすすめします笑
One Comment