Vue js componentのグローバルな書き方とローカルな書き方
グローバルは過去記事の記載方法
kirikko-scondcube.hatenablog.com
kirikko-scondcube.hatenablog.com
kirikko-scondcube.hatenablog.com
簡単に言うと
Vue.component(第一引数, 第二引数）
で宣言し、使用するもの
しかしこの場合常にコンポーネントの読み込みがされて重くなる。
そこでローカルの使い方を覚える。
ローカルでの記述は以下
コード全体
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Vueの練習</h1>
<div id="app">
<h2>{{message}}</h2>
<list></list>
</div>
<script>
const titleCom = {
data(){
return{
}
},
template:`<h3>{{text}}</h3>`
}
components:{
'titleCom': titleCom
},
return {
items:[
{id:1, name:'taro' },
{id:2, name:'ziro' },
{id:4, name:'yon' },
{id:5, name:'goro' },
]
}
},
template:`
<div>
<titleCom></titleCom>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
})
new Vue({
el:'#app',
data:{
message:'コンポーネントの練習'
}
})
</script>
</body>
</html>
コンポーネント部分
const titleCom = {
data(){
return{
}
},
template:`<h3>{{text}}</h3>`
}
components:{
'titleCom': titleCom
},
return {
items:[
{id:1, name:'taro' },
{id:2, name:'ziro' },
{id:4, name:'yon' },
{id:5, name:'goro' },
]
}
},
template:`
<div>
<titleCom></titleCom>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
})
この例ではコンポーネントtitleComをローカルで宣言
ローカルで宣言は定数constに内容を格納。
【注意点】
・使用する際はグローバルのようにhtml部分にタグの形で入れても表示されない。
→ローカル登録の場合は、登録先コンポーネントないのテンプレートからしか呼び出すことができない
template:`
<div>
<titleCom></titleCom>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
・ローカルのコンポーネントを使用する際、読み込み先で
components:{
'titleCom': titleCom
},
このように宣言する（コンポーネント名:コンポーネントオブジェクト）
コンポーネント名：自由に決めてOK
コンポーネントオブジェクト：constで定義した名前となっている。
グローバルからローカルへの書き換え方法
上記全体コードでは
titleComがローカル
listがグローバル
でコンポーネント化されている。
components:{
'titleCom': titleCom
},
return {
items:[
{id:1, name:'taro' },
{id:2, name:'ziro' },
{id:4, name:'yon' },
{id:5, name:'goro' },
]
}
},
template:`
<div>
<titleCom></titleCom>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
})
new Vue({
el:'#app',
data:{
message:'コンポーネントの練習'
}
})
このlistをローカル化すると以下になる
components:{
'titleCom': titleCom
},
return {
items:[
{id:1, name:'taro' },
{id:2, name:'ziro' },
{id:4, name:'yon' },
{id:5, name:'goro' },
]
}
},
template:`
<div>
<titleCom></titleCom>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
}
new Vue({
el:'#app',
conponents:{
'list':List
},
data:{
message:'コンポーネントの練習'
}
})
基本的にVue.component(第一引数，第二引数）を
const コンポーネント名（第一引数の名前にしちゃうとわかりやすい）= {第二引数の処理}
↑グローバルから変更した場合は外のとじかっこ「 ）」を削除することを忘れない。
そして使用するVueの宣言にconponents:で宣言する。
