组件间需要能相互通信才价值，通信包括数据的传递，方法的调用。这样才能将不同组件结合起来搭建页面

父组件传递数据给子组件

父组件通过v-bind将数据传给子组件，子组件使用props接收数据

父子组件传值

具体代码

父子组件传值.gif

子组件调用父组件方法

父组件在调用子组件时通过@func=传递方法名，子组件使用$emit调用父组件方法，子组件可以将组件内的数据作为参数经由父组件的方法处理

子组件调用父组件方法

具体代码

子组件调用父组件方法.gif

案例：评论列表

功能需求如下图：

评论组件.gif

将评论和显示分别封装成组件

评论组件：

<!--评论组件-->
<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');
}

具体代码

更多vue.js的有趣实例，请点击移步至目录