Vue js componentについての注意点

コンポーネント

data:{

},

template,,,,,,,,,,,,

 

といったオブジェクトの記述は出来ない。

この場合は

 

data(){第一引数(コンポーネント名, 第二引数(コンポーネント内容)))

の記述をする

例)

Vue.component('title-com',{
data(){
return{
text:'コンポーネント入れ子構造練習',
}
},
template:`<h3>{{text}}</h3>`
})

 

Vue.component('list',{//第一引数がコンポーネント名(この名前で呼び出す)
data(){//第二引数にコンポーネントの内容を記述する
return {
items:[
{id:1, name:'taro' },
{id:2, name:'ziro' },
{id:3, name:'sabu' },
{id:4, name:'yon' },
{id:5, name:'goro' },
]
}
},
template:`
<div>
<title-com></title-com>
<ul>
<li v-for='item in items' :key='item.id'>
{{item.name}}
</li>
</ul>
</div>
`
})

など

 

コンポーネントのtemplate内では開始タグは同じ階層に1つしか置けない。