HTMLテンプレートと機能などをまとめることができる機能としてコンポーネントがあります。
今回は、コンポーネントの基本的な機能についてまとめてみたいと思います。
###コンポーネントを使う上で基本的な考え方
コンポーネント化することで何がメリットかというと
・機能ごとに区別して作成が可能
・再利用可能になり保守性が高めることができる
ことがあげられます。
そして、
コンポーネントには"使う側（親）”と"使われる側（子）"と言う関係になります。
この関係を抑えることでコードの記載する内容も変わってきますので注意しましょう。
###グローバルコンポーネントとローカルコンポーネント
コンポーネントには２種類あります。
グローバルとローカルのコンポーネントです。
・Vueのインスタンスを複数作成した際にどのインスタンスでも適用させたい場合にはグローバルコンポーネントを使用します。
・特定のVueインスタンス内で使用したい場合にはローカルコンポーネントを使用します。
定義する場合には下記のようになります。
記載方法の違いと言えばcreateApp({})で定義するか、.componentで宣言するかの違いです。
####グローバルコンポーネント
Vue.createApp({}).component('mydata',{
data:function(){
return{
title:'',
}
},
template: `<input type="text" v-model="title" />`,
})
####ローカルコンポーネント
Vue.createApp({
component: {
'mydata': {
data: function () {
return {
title: '',
}
},
template: `<input type="text" v-model="title" />`,
},
},
}).mount('#app')
一点注意点としては、グローバルコンポーネントを利用する場合にはJavaScriptファイルが上から読み込まれてしまうので、適用したいVueインスタンスよりも前に記述することが必要です。
Vue.component('sample1', {
data() {
return {
testms: 'hello!'
}
},
template: '<div>{{ testms }}</div>'
})
new Vue({
el: '#app'
})
//上記でVueインスタンスが定義されたため、ここから下のコンポーネントは読み込まれない。
Vue.component('sample2', {
data() {
return {
testms2: 'bye!'
}
},
template: '<div>{{ tsetms2 }}</div>'
})
参考:VueのComponent（コンポーネント）の書き方・使い方について解説
###コンポーネント定義の内容について
コンポーネントの定義については、2つポイントを説明します。
Vue.createApp({
component: {
'mydata': {
data: function () {
return {
title: '',
}
},
template: `<input type="text" v-model="title" />`,
},
},
}).mount('#app')
#####・dataプロパティの取り扱い
コンポーネント内で使用したいdataプロパティについては、定義する際にオブジェクトを返す関数である必要があります。
data: function () { //function定義
return { //return
title: '',
}
},
#####・templeteの取り扱い
コンポーネントのHTMLを定義するためにはtempleteを定義する必要があります。
template: `<input type="text" v-model="title" />`,
ただ、現実問題としてコンポーネントが複雑になると文字列として定義するには可読性が低くなってしまいます。
そのために、templeteの内容をHTMLへ記載する方法があります。
<div id="app">
<mydata></mydata>
</div>
<script type="text/x-template" id="mydata-template">
<input type="text" v-model="title" />
</script>
template: '#mydata-template',
template内の要素を下記のようにscriptタグ内で定義することhtmlに記載することが可能です。
<script type="text/x-template" id="~~~~">
//templeteの内容
</script>
後は、htmlのidとJavaScriptの'#~'で紐づけることで、コンポーネントのtemplete部分の可読性が上がり、記載も簡単になります。
####コンポーネント自体が冗長になった時には。。
上記のsample.jsファイルのコンポーネントが冗長になり、可読性が低いと感じる時にはコンポーネントを切り離して,constで宣言してあげることで回避するのも一つの手です。
//コンポーネントを切り離す
const mydataobj = {
data: function () {
return {
title: '',
}
},
template: '#mydata-template',
}
Vue.createApp({
component: {
'mydata': mydataobj
},
}).mount('#app')
と言うような形でコンポーネントの概要についてまとめてみました。
コンポーネントが理解できれば後は値の受け渡しが必要ですよね。
近日中に追記したいと思います。