vue.js组件间通信

<!--评论组件-->
<template id="comment">
    <form action="" method="post" class="form-horizontal" role="form">
        <div class="form-group">
            <legend>发表评论</legend>
        </div>

        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" v-model="user" placeholder="请输入名字">
            </div>
        </div>

        <div class="form-group">
            <label for="content" class="col-sm-2 control-label">高见</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="content" v-model="content" rows="3" placeholder="敢问足下有何高见？"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="submit" class="btn btn-primary" @click.prevent="postComment">发表</button>
            </div>
        </div>
    </form>
</template>

<!--显示列表组件-->
<template id="list">
    <ul class="list-group">
        <li v-for="(item, key) in list" :key="key" class="list-group-item">
            {{ item.user }}：{{ item.content }}
        </li>
    </ul>
</template>

<div id="app">
    <comment @func="loadComments"></comment>
    <list v-bind:list="list"></list>
</div>

postComment() {
    let comment = {
        user: this.user,
        content: this.content
    };

    let list = JSON.parse(localStorage.getItem('comment') || '[]');
    list.unshift(comment);
    localStorage.setItem('comment', JSON.stringify(list));

    this.user = this.content = '';
    this.$emit('func');
}