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{