Vue - 父子组件通信 - 双向绑定

<div id="app">
  <cpn :cnumber1="num1" :cnumber2="num2" @b1-listener="b1click" @b2-listener="b2click"></cpn>
</div>

<template id = 'cpn'>
  <div>
    <h2>props: {{cnumber1}}</h2>
    <h2>data: {{dnumber1}}</h2>
    <!-- <input type="text" v-model="dumber1"> -->
    <input type="text" :value="dnumber1" @input="b1">
    <h2>props: {{cnumber2}}</h2>
    <h2>data: {{dnumber2}}</h2>
    <!-- <input type="text" v-model="dumber2"> -->
    <input type="text" :value="dnumber2" @input="b2">
  </div>
</template>

<script src="../vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cnumber1: Number,
      cnumber2: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        dnumber1: this.cnumber1,
        dnumber2: this.cnumber2
      }
    },
    methods: {
      b1(event) {
        this.dnumber1 = event.target.value;
        this.$emit('b1-listener', this.dnumber1);
      },
      b2() {
        this.dnumber2 = event.target.value
        this.$emit('b2-listener', this.dnumber2);
      }
    }
  }

  const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 2
      },
      methods: {
        b1click(value) {
          this.num1 = parseFloat(value);
        },
        b2click(value) {
          this.num2 = parseFloat(value);
        }
      },
      components: {
        cpn
      }
  })
</script>
</body>