Vue.jsのコンポーネントをライトな範囲で使う
Vue.jsの情報をあさっていると「.vue」拡張子のファイルに行き着くんですよね。
これって公式様のいう「単一ファイルコンポーネント」なんですが、ビルド（ようはコンパイル）が必要なんですよ。
ライトな範囲で使う前提なので、ビルドツールはもちろん使用しません！ そのため、今回は単一ファイルコンポーネントは利用できません。
じゃあ、せっかく行き着いた情報は意味がないのかというとそうでもなくて。（ビルドツールを使わないので）単一ファイルコンポーネントは使えませんが、コンポーネント自体は使えるのです。（ということがわかるまで結構四苦八苦しました……）
単一ファイルコンポーネントのソースを同じファイル内に書いてしまえば動きます。
（※注意！！！ 本来のコンポーネントの概念には真っ向から逆らっています！ 分かる人はちゃんとビルドツールを使ってください！ そのほうが色々便利です！！！）
コンポーネントの使い方
公式を見ましょう（←
あと、こちらの記事が分かりやすかったです。（私はこの内上の２つしか使っていませんが……）
ライトな範囲ででもコンポーネントを使う利点
単一ファイルコンポーネントは再利用という面において非常に便利です。が、単一ファイルじゃないならコンポーネントを使う意味がないのかといわれると、もちろん利点はとってもあります。
- 同ページ内で同種の要素を使いまわせる。
- ネストしがちなHTMLをすっきり簡略化。
- スコープを切り分けることでメインインスタンスを圧縮。
同種の要素を使いまわせる
振る舞いはほぼ同じだけどもとになるデータが違うとき、同じようなタグを二回三回書くのは嫌ですよね？
そういうときのためのコンポーネントです。同じコンポーネントに違うデータを流し込みましょう。
<!-- メインのHTML部分 --> <body> <div is="hoge-component" v-for="hoge in hogeAList" :hoge="hoge" class="hogeADiv" > </div> <div is="hoge-component" v-for="hoge in hogeBList" :hoge="hoge" class="hogeBDiv" > </div> </body> <!-- コンポーネントのテンプレート --> <script type="text/x-template" id="hoge-component"> <div @click="hogeClick(hoge)" :class="hoge.class" > {{hoge.name}} </div> </script>
コンポーネントの中身やアクションを書くのは一度で済みます。
HTMLが簡略化
ネストしている部分が外だしされるので、すっきりしてページの構造がわかりやすくなっています。
v-forのおかげで同じタグをコピペで増殖させる必要もありません。
メインインスタンスを圧縮
コンポーネントを使うと、要素に対するふるまい(算出プロパティやメソッド)がメインインスタンスから切り離されます。
親子間のデータのやり取りは明示的に宣言する必要がありますが、その分スコープ内に集中できます。
各要素のオンクリックメソッドで大変なことになったjQueryを見たことがありませんか……？ イベント分けのためのクラスが増えすぎて、レイアウト指定用もあいまって10個くらいクラスがついた要素とか……。
ライトな範囲でもコンポーネントを使うと、スパゲッティに多少は歯止めをかけられます。
まとめ
コンポーネントは便利だよ！
詳細は次回、「Vue.js＋D3.jsで時間割を表示する」で実感できると思います。
