Vue2 | 父子组件通信案例 三向绑定

需求：

        1.一旦input里面的数字发生改变，展示的number1，2跟着变

        2.并且Vue实例中的data里面的num1 num2 跟着改变

    <div id="app">
      <cpn :number1="num1" :number2="num2"></cpn>
    </div>
    <template id="cpn">
      <div>

        <h2>{{number1}}</h2>
        <input type="text" v-model="number1">
        <h2>{{number2}}</h2>
        <input type="text" v-model="number2">
      </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>

        const app = new Vue({
            el: "#app",
            data: {
               num1:1,
               num2:0

            },
            methods: {

            },
            computed: {

            },
            components:{
              cpn:{
                template:"#cpn",
                props:{
                  number1:Number,
                  number2:Number
                }
              }
            }
        })
    </script>

 V-model绑定input框和组件的数据时报警告，不推荐这样修改组件的数据，这个时候数据来源于Vue实例中的data，但是同时又绑定了input框中，会很乱，所以我们在data里面把数据拿过去初始化再更改

  <template id="cpn">
    <div>

      <h2>props:{{number1}}</h2>
      <h2>data:{{dnumber1}}</h2>
      <input type="text" v-model="dnumber1">
      <h2>{{number2}}</h2>
      <h2>data:{{dnumber2}}</h2>
      <input type="text" v-model="dnumber2">
    </div>
  </template>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: "#app",
      data: {
        num1: 1,
        num2: 0

      },
      methods: {

      },
      computed: {

      },
      components: {
        cpn: {
          template: "#cpn",
          props: {
            number1: Number,
            number2: Number
          },
          data() {
            return {
              dnumber1: this.number1,
              dnumber2: this.number2
            }
          }
        },

      }
    })

 在组件的data里面初始化props拿过来的number 1,2 ，并且重命名dnumber1,2,此时v-model将data里面的数据与input里面的数据双向绑定，此时已经完成了第一个需求

怎么改变Vue实例里面的data值？

  <div id="app">
    <cpn 
    :number1="num1" 
    :number2="num2" 
    @num1change="num1change"
    @num2change="num2change"
    
    />
  </div>
  <template id="cpn">
    <div>

      <h2>props:{{number1}}</h2>
      <h2>data:{{dnumber1}}</h2>
      <input type="text" :value="dnumber1" @input="num1Input">
      <h2>{{number2}}</h2>
      <h2>data:{{dnumber2}}</h2>
      <input type="text":value="dnumber2" @input="num2Input">
    </div>
  </template>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: "#app",
      data: {
        num1: 1,
        num2: 0

      },
      methods: {
        num1change(value){
          this.num1 = value 
        },
        num2change(val){
          this.num2 = value
        },
      },
      computed: {

      },
      components: {
        cpn: {
          template: "#cpn",
          props: {
            number1: Number,
            number2: Number
          },
          data() {
            return {
              dnumber1: this.number1,
              dnumber2: this.number2
            }
          },
          methods: {
            num1Input(event) {
              this.dnumber1 = event.target.value
              this.$emit('num1change', this.dnumber1)
            },
            num2Input(event) {
              this.dnumber2 = event.target.value
              this.$emit('num2change', this.dnumber2)

            },
          }
        },

      }
    })
  </script>

这个案例看到

v-model的本质：用v-bind实现view与数据的绑定，使得data变化时，view层发生变化

再用v-on监听input框的变化，当input框发生改变时，我们执行一个方法

 num1Input(event) {
              this.dnumber1 = event.target.value
              this.$emit('num1change', this.dnumber1)
            },

第一行将input变化后的值赋值给data里面的dnumber，这就是v-model的本质

第二行，在数据发生变化时，发送一个num1change的方法，再把变化的值传出去

 <cpn 
    :number1="num1" 
    :number2="num2" 
    @num1change="num1change"
    @num2change="num2change"
    
    />

传过来之后，在Vue实例里面写一个方法

        num1change(value){
          this.num1 = value 
        },

至此，实现了Vue实例中的数据，组件中的数据，input框中的数据的绑定

 但是这个时候会报一个类型的错，传过来的值默认是String类型，做一个类型转换就可以

        num1change(value){
          this.num1 =parseFloat(value)
        },

 ODK了