父子组件之间实现的复杂双向绑定

一个需求：现在在组件中有两个input，其中需要实现input的双向绑定（且改变父组件的data值），且输出时第二个input的值时第二个值的100倍。

用到的技术点：父子组件通信，表单的双向绑定

值得一提的是当我们Vue官方不建议使用model时直接将props的值放在里面，因为这样这里的值是从父组件传递而来，因此直接修改可能会导致紊乱。因此我们需要借助组件的data属性来做值得绑定；

至于另一个需求，改变data的属性，那么我们可以使用父传子的方法将组件的data传给父组件，再去修改父组件data的值，这样一来我们及修改了父组件的data，同时也就修改了子组件props的相关值。

最后的需求是100倍，这个也在我们的input事件触发时监听，然后计算，在通过emit传递即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <mycon :cnum1='num1' :cnum2='num2' @event1='event1' @event2='event2'></mycon>
  </div>
  <template id="cpm">
    <div>
      <p>props:{{cnum1}}</p>
      <p>data:{{copycnum1}}</p>
      <input type="text" name="" id="" :value='copycnum1' @input='docopycnum1'>
      <p>props{{cnum2}}</p>
      <p>data{{copycnum2}}</p>
      <input type="text" name="" id="" :value='copycnum2' @input='docopycnum2'>
    </div>
  </template>
</body>
<script src="../vue.js"></script>
<script>
  var cpm = {
    template: '#cpm',
    props: {
      cnum1: Number,
      cnum2: Number,
    },
    data() {
      // 官方建议做法
      return {
        copycnum1: this.cnum1,
        copycnum2: this.cnum2,
      }
    },
    methods: {
      docopycnum1(event) {
        this.copycnum1 = event.target.value;
        this.$emit('event1', this.copycnum1);
        this.copycnum2=this.copycnum1*100
        this.$emit('event2', this.copycnum2)
      },
      docopycnum2(event) {
        this.copycnum2 = event.target.value;
        this.$emit('event2', this.copycnum2)
        this.copycnum1=this.copycnum2/100
        this.$emit('event1', this.copycnum1)
      }
    },
  }
  new Vue({
    el: '#app',
    data: {
      num1: 0,
      num2: 0
    },
    components: {
      mycon: cpm
    },
    methods: {
      event1(data) {
        this.num1 = parseFloat(data);
      },
      event2(data) {
        this.num2 = parseFloat(data);
      }
    },
  })
</script>

</html>

Vue父子组件之间实现的复杂双向绑定

父子组件之间实现的复杂双向绑定