Vue父子通信-结合双向绑定案例

一.html

二.script

     const cpn ={
  template: '#cpn',
  props:{
    number1 : Number,
    number2 : Number,
  },
  data () {
    return {
      Cnumber1 : this.number1,
      Cnumber2 : this.number2
    }
  },
  watch: {
    Cnumber1(newValue,oldValue){
      this.Cnumber2 =newValue * 100
      this.$emit('num1change',newValue)
    },
    Cnumber2(newValue){
      this.Cnumber1 =newValue / 100
      this.$emit('num2change',newValue)
    }
  //   num1Input(event){
  //     //将input中的value赋值到Cnumber中
  //     this.Cnumber1 =event.target.value;
  //     //让父组件可以修改值，发出一个事件
  //     this.$emit('num1change',this.Cnumber1)
 
  //     // //同时修饰Cnumber2的值
  //     // this.Cnumber2 =this.Cnumber1 * 100;
  //     // this.$emit('num2change',this.Cnumber2)
  //   },
  //   num2Input(event){
  //     this.Cnumber2 =event.target.value;
  //     this.$emit('num2change',this.Cnumber2)

  //     // //同时修饰Cnumber2的值
  //     // this.Cnumber1 =this.Cnumber2 / 100;
  //     // this.$emit('num1change',this.Cnumber1)
  // }
}
}
const app =new Vue({
  el:"#app",
  data:{
    num1 :0,
    num2 :1,
  },
  components:{
    cpn
  },
  methods: {
    num1change(value){
    this.num1 =parseFloat(value) 
    },
    num2change(value){
    this.num2 =parseFloat(value)
    }
  }
})