コンポーネントって何。
今回はVueの特徴の一つである「コンポーネント」について学習していきたいと思います。
component(コンポーネント)って何
部品という意味で、使いまわすことが可能な塊というイメージ。
ヘッダー、フッター、ローディング画面やエラー画面など、複数のviewにまたがって表示したい内容を書きたい時によく使われる。
railsでいうsharedのように、componentのみをまとめたフォルダで管理することができる。
このファイルは、呼び出したいファイルの最初の行あたりでimportすることで定義したcomponentを使用することができる。
使用例
# button-counter と呼ばれる新しいコンポーネントを定義する
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
コンポーネントは、名前付きの再利用可能な Vue インスタンスだそう。
今回の例で言うと、<button-counter>が該当する。
<button-counter>をviewに書くと、template:の内容がHTMLで表示される。
また、このコンポーネントを new Vue で作成されたルート Vue インスタンス内でカスタム要素として使用することができる。
<div id="components-demo">
<button-counter></button-counter>
</div>
#このファイルで<button v-on:click="count++">You clicked me {{ count }} times.</button>が表示される。
new Vue({ el: '#components-demo' })
#
props
templateの内容を動的に変更するためのプロパティ。
使用例
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
titleをHTMLタグに直接書き込むことができる。後任の人は、このコンポーネントは、My journey with Vueが表示されるんだな〜とわかるので、可読性が上がる。
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
生成されるHTML
My journey with Vue
Blogging with Vue
Why Vue is so fun
コンポーネントの登録
グローバル登録
登録後に作成された、全てのルート Vue インスタンス(new Vue)のテンプレート内で使用できることを意味している。
ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまう。Vue.componentを前につける。
使用例
# js
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
#HTML
# jsで定義した第二引数が、new Vueで宣言したidタグ内で使用される。
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
ローカル登録
コンポーネントは登録したページ内でしか使えない。
下記のようにして使用する。
#/* ... */は表示させたい内容を書く
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
他のモジュールで使いまわしたい時は、下記のように記述する
#ComponentB.vueもしくはComponent.jsで、ComponentA.vueを使いたい時の記述
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
複数のファイルをインポートすることも可能
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
まとめ
コンポーネントを使うことでDRYにコードを書くことができる。
