vue 父子通信( props、$emit ) 结合 双向数据绑定 ( v-model ) 案例

先看一下页面渲染效果:
把父组件num的值传到子组件中 , 渲染 ( props )
子组件 data 定义 , 用于接收父组件传值 , 渲染 ( data )

不在data中定义会报错 ,(不能直接改变父组件的值)

父传子:
代码：
子组件：

  <div>
      <!-- 渲染子组件中定义data: firstnumber1  -->
    <div>data:{{firstnumber1}}</div>
      <!-- 渲染父组件传过来的num值 -->
    <div>props:{{number1}}</div>
     <!--  input框,使用v-model,绑定自定义的firstnumber1
  		   (不能直接改变父组件传来的num值),
  		   当firstnumber1改变时,父组件的num值不会被改变-->
    <input type="text"  v-model="firstnumber1">
	<!-- 与上同理 -->
    <div>data:{{secondnumber2}}</div>
    <div>props:{{number2}}</div>
    <input type="text" v-model="secondnumber2">
  </div>

export default {
  data(){
    return{
    //data中定义firstnumber1,值为从父组件传来的num值(this.number1)
      firstnumber1:this.number1,
    //data中定义secondnumber2,值为从父组件传来的num值(this.number2)
      secondnumber2:this.number2
    }
  },
  //父传子props,props可以是数组,可以限制类型,可以设置默认值
  //限制number的类型,为数字
  props:{
    number1:Number,
    number2:Number
  },
}

父组件：

<template>
  <div>
   <!-- 使用v-bind: 简写: 
   把我们在子组件定义的number1,number2
   与父组件num1,num2 进行绑定-->
    <HelloWorld :number1="num1" :number2="num2" ></HelloWorld>
  </div>
</template>

//引入我们的子组件名为HelloWorld
import HelloWorld from "./components/HelloWorld.vue"
export default {  
  data(){
    return{
      num1 : 1,
      num2 : 0
    }
  },
  //在这里使用一下我们引入的子组件HelloWorld
  components:{
    HelloWorld,
  },
}

当我们改变input框值时 , 我们可以看到data的值也跟着改变了,父组件的num值没有改变所以props的值没有变

以上是通过父传子 , 在data中定义 , 在不影响父组件num值,实现我们的数据绑定。
下面我们通过子传父的方式 , 改变父组件num的值实现数据绑定 。
子传父:
子组件:

<div>
    <div>data:{{firstnumber1}}</div>
    <div>props:{{number1}}</div>
    <!-- value属性:规定input值, @input 监听事件 -->
	<input type="text" :value="firstnumber1"  @input="numberOne">
	<!-- 与上同理 -->
    <div>data:{{secondnumber2}}</div>
    <div>props:{{number2}}</div>
    <input type="text" :value="secondnumber2" @input="numberTwo">
  </div>

export default {
  data(){
    return{
      firstnumber1:this.number1,
      secondnumber2:this.number2
    }
  },
  props:{
    number1:Number,
    number2:Number
  },
  methods:{
  //我们把HTML中input中的@input的监听事件的numberOne拿来
    numberOne(event){
    //event.target.value 获取当前文本框的值
      this.firstnumber1 = event.target.value
      //使用$emit,将firstnumber1传到父组件中
      this.$emit("numbers1",this.firstnumber1)
    },
    //同上
    numberTwo(event){
      this.secondnumber2 = event.target.value
      this.$emit("numbers2",this.secondnumber2)
    }
  }
}

父组件:

<div>
  <!-- 使用v-on 简写@ 绑定事件-->
    <HelloWorld 
    	:number1="num1" 
    	:number2="num2" 
	    @numbers1="numbers1" 
	    @numbers2="numbers2">
    </HelloWorld>
  </div>

import HelloWorld from "./components/HelloWorld.vue"
export default {  
  data(){
    return{
      num1 : 1,
      num2 : 0
    }
  },
  components:{
    HelloWorld,
  },
  computed:{
     
  },
  methods:{ 
  // 在这里使用子组件$emit传来的值,使他的value 值 = 父组件num值
    numbers1(value){
    // * 1 是因为传到这里的值时string类型,报错,需要转换,
    // * 1或parseInt可以把它转换成数字
      this.num1 = value * 1
    },
    numbers2(value){
      this.num2 = parseInt(value)
    }
  },
}

效果如下:

如果我们想让num2的值是num1输入值的2倍 , 我们可以这样做
在父组件中写入代码:

 methods:{ 
    numbers1(value){
      this.num1 = value * 1
      //num2 的值 = num1 的值 *2
      this.num2 = this.num1 *2
    },
 },