Vue.jsでComponentを利用する〜templateのみ〜
いきさつ
職場でVueを使うので勉強する必要がある。
とりあえず
vue-cliを使っても良いが、
きちんと理解したいので生で書くことにした。
ルートコンポーネント
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue TEST</title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="./vue.js"></script> <script src="./app.js"></script> </body> </html>
ここでいうid="app"のdivで囲まれている部分がVueで管理される範囲。
今回はmy-componentタグで囲まれている部分をComponentとして、
Vueで管理してみる。
テンプレート情報だけをもつコンポーネントを作ってみる
// app.js // コンポーネントの定義 var mycomponent = { template: '<div>hello</div>' }; // コンポーネントの登録 Vue.component('my-component', mycomponent); // 今後生成されるすべてのvueインスタンスで使えるようになる var app = new Vue({ el: '#app' });
component自体はタダのオブジェクト。
templateというkeyにcomponentのhtml構造をもたせることができる。
そして、
Vue.component('my-component', mycomponent);
でVue（のコンストラクタ）にcomponentを登録する。
この宣言をしておくと、
今後生成されるすべてのVueインスタンス内において、
mycomponentが使えるようになる。
まとめ
すごい単純。
メリットはhtml構造が使い回せるくらい。
Componentが増えたり処理が増えたりすると、Componentを単一ファイルで管理する
「単一ファイルコンポーネント」ということになってくる。
