<div id="demo">
<div :style="{fontSize:postFontSize + 'em'}">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize+=0.1"
></blog-post>
</div>
</div>
</body>
<script>
//子组件向父组件发送消息$emit
Vue.component("blog-post",{
props:["post"],
template:`
<div>
<h5>{{post.title}}</h5>
<button v-on:click="$emit('enlarge-text')">变大</button>
</div>
`
})
new Vue({
el:"#demo",
data:{
posts:[
{id:1,title:"今天"},
{id:2,title:"明天"},
{id:3,title:"后天"}
],
postFontSize:1
}
})
</script>
<div id="demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-on:click="currentTab=tab"
>{{tab}}
</button>
<component v-bind:is="currentTabComponent"></component>
</div>
</div>
</body>
<script>
//动态组件
Vue.component("home",{
template:`<div>我是Home</div>`
})
Vue.component("post",{
template:`<div>我是post</div>`
})
Vue.component("arch",{
template:
`<div>我是arch</div>`
})
new Vue({
el:"#demo",
data:{
currentTab:"Home",
tabs:["Home","Post","Arch"]
},
computed: {
currentTabComponent: function () {
return this.currentTab.toLowerCase();
}
}
})
</script>