Vue js Component 入れ子構造について

2つのコンポーネントを作成→入れ子構造にして表示を実装

コンポーネントについての過去記事は以下

kirikko-scondcube.hatenablog.com

コード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
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>
 `
})


new Vue({
el:'#app',
data:{
message:'コンポーネントの練習'
 }
})
 
</script>
</body>
</html>

title-comのコンポーネントを作成→そのコンポーネント名をlistコンポーネントのtemplate内で記述

するとlistコンポーネント内でtitle-comコンポーネントが実行される。

表示結果

f:id:kirikko_Scondcube:20200730214837p:plain