Vue 组件通信（双向绑定）

<div id="app">
  <child :app="app" @on-app-change="onAppChange"></child>
  <button @click="appMethod">{{ app }}</button>
</div>

<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script type="application/javascript">
    Vue.component('child', {
      template: '<button @click="childMethod">{{ app }}</button>',
      props: ['app'],
      data: function () {
        return {
          // 外部属性只读不可写，增加中间变量
          myApp: this.app
        };
      },
      watch: {
        // 监听外部属性的变化
        app(val) {
          this.myApp = val;
        },
        // 中间变量改变向上传递通知
        myApp(val) {
          this.$emit("on-app-change", val);
        }
      },
      methods: {
        // 改变中间变量值
        childMethod: function(){
          this.myApp++;
        }
      },
    })
    new Vue({
      el: '#app',
      data: {
        app: 0
      },
      methods: {
        appMethod: function () {
          this.app++;
        },
        // 定义方法，用于接收子组件中的通知
        onAppChange(val) {
          this.app = val;
        }
      }
    })
</script>

参考：如何在Vue2中实现组件props双向绑定