vue 父子组件通信

1.父子组建通信 for循环出来的数组传到子组件:组件功能是点击组件，字体扩大

//父组件
<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

            }
        }
    })

2.子组件通过props接收父组件传来的数值

 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输出事件传给父组件
            }
        }

    });