<div class='box'>
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<my-child v-bind:til="title"></my-child>
<my-son v-bind:lis="list"></my-son>
</div>
`,
data:function(){
return{
list:["apple","banana","pear"],
title:"水果列表"
}
}
})
Vue.component("my-child",{
props:["til"],
template:`
<h1>{{til}}</h1>
`
})
Vue.component("my-son",{
props:["lis"],
template:`
<ul>
<li v-for="value in lis">{{value}}</li>
</ul>
`
})
new Vue({
el:".box"
})
</script>
QQ图片20180919152257.png
