将子组件数据传到父组件里
<div id="app">
<you-father></you-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('you-father',{
template:`
<div>
<h1>父组件</h1>
<you-child v-bind:num="msg"></you-child>
</div>
`,
data:function(){
return{
msg:"What are you doing now?"
}
}
});
Vue.component('you-child',{
props:["num"],
template:`
<div>
<h2>子组件</h2>
<img src="../img/2.jpg" alt="">
<a href="">{{num}}</a>
</div>
`
});
new Vue({
el:"#app"
});
</script>
父传子的嵌套
<div id="app">
<you-market></you-market>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('you-market',{
template:`
<div>
<you-tit v-bind:tit="title"></you-tit>
<you-fruit v-bind:fruList="list"></you-fruit>
</div>
`,
data:function(){
return{
list:["apple","pear","banana"],
title:"水果促销"
}
}
});
Vue.component('you-tit',{
props:["tit"],
template:`
<div>
<h1>{{tit}}</h1>
</div>
`
});
Vue.component('you-fruit',{
props:["fruList"],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
});
new Vue({
el:"#app"
});
</script>
