vue 父子组件通信

//父组件
<div id="blog-posts-events-demo">
<div>
<blog-post
:style="{ fontSize: postFontSize + 'em' }"
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
@test="test"
></blog-post>
</div>
</div>

//script
new Vue({
el: '#blog-posts-events-demo',
data: {
posts:[
{id:2,title:'第一'},
{id:3,title:'第二'},
{id:4,title:'第三'}
],
postFontSize:1
},
methods:{
test: function (data) {
console.log(data); //子组件传递出来的$emit('事件'，'事件的参数值')
console.log(this.postFontSize);
return this.postFontSize += data

}
}
})

Vue.component('blog-post', {
props: ['post'], //从父组件传接收post

template:
'<div class="blog-post">' +
'<h3>{{post.title}}</h3>' +
'<button @click="enlargeText">扩大字体</button>'+
'<div v-html="post.content"></div>'+
'</div>',

data: function () {

},
methods:{
enlargeText: function () {
this.$emit('test',0.1 ) //$emit输出事件传给父组件
}
}

});