因为props是单向数据流，所以我们有几种方式去实现父子组件input输入框双向绑定。

方法一：props属性 + input回调

父组件 Demo

<template>
    <div id="demo">
        <div class="box">
            <input type="text" v-model="name"/>
            <demo-child v-model="name"></demo-child>
        </div>
    </div>
</template>

    import DemoChild from '@/components/DemoChild'
    export default {
        data() {
            return {
                name:'你好呀'
            }
        },
        components: {
            DemoChild
        },
    }

子组件 DemoChild

<template>
  <div id="demo_child">
    <div class="box">
      <!-- input的值绑定nameFromFather,input的值发生改变时触发change事件（input事件是输入框值发生改变的回调事件）-->
     <input type="text" :value="nameFromFather" @input="change"/>
    </div>
  </div>
</template>

  export default {
    name: 'child',
    //声明model，这个model就是父组件绑定的model
    model:{
      prop: 'nameFromFather',  // 绑定的props属性，这里是'nameFromFather'
      event: 'dataToFather'    // 触发父组件中v-model绑定的属性发生改变的方法，名称自取
    },
    props:{
      nameFromFather:String  //自定义属性，名称自取，这个属性接收父组件传递过来的数据
    }, 
    methods: {
      change(e){
        //this.$emit('调用的方法即model中的event','子组件input的值')
        this.$emit('dataToFather',e.target.value)
      }
    },
  }

因为每种方法对于父组件的写法是一样的，只是子组件上有所不同，所以下面的方法我就不贴上父组件的代码了，有需要的话，直接看方法一中父组件的写法即可。

方法二：data属性 + input回调

子组件 DemoChild

<template>
  <div id="demo_child">
    <div class="box">
     <input type="text" v-model="value" @input="change"/>
    </div>
  </div>
</template>

  export default {
    name: 'child',
    //利用data数据,与input输入框的value值绑定
    data(){
      return {
        value:this.nameFromFather   //自定义属性，名称自取，使其值等于自定义的props属性
      }
    },
    //声明model，这个model就是父组件绑定的model
    model:{
      prop: 'nameFromFather',  // 绑定的props属性，这里是'nameFromFather'
      event: 'dataToFather'    // 触发父组件中v-model绑定的属性发生改变的方法，名称自取
    },
    props:{
      nameFromFather:String  //自定义属性，名称自取，这个属性接收父组件传递过来的数据
    }, 
    methods: {
      change(e){
        //this.$emit('调用的方法即model中的event','子组件input的值')
        this.$emit('dataToFather',e.target.value)
      }
    },
  }

其实对比下来很明显就能看到，方法一和方法二的不同就在于input输入框绑定值的方式不一样，一个是:value:nameFromFather,一个是v-model:"value"，那么为什么我们不直接用v-model："nameFromFather"呢？

其实原因很简单，因为组件props属性是单向数据流，如果它既接收父组件的数据又改变父组件的数据，那么数据绑定这块就乱套了，到底谁是初始数据就说不清楚了，所以vue把v-model绑定props属性的这种使用方式做了报错处理。

v-model=”props属性“.png

仔细看报错图片"Instead..."后面那串，其实我们的方法二和方法三就是上面描述的方法，"use a data or computed property based on the prop's value"

方法三：data属性+watch监听

子组件 DemoChild

<template>
  <div id="demo_child">
    <div class="box">
     <input type="text" v-model="value" />
    </div>
  </div>
</template>

  export default {
    name: 'child',
     //利用data数据,与input输入框的value值绑定
    data(){
      return {
        value:this.nameFromFather  //自定义属性，名称自取，使其值等于自定义的props属性
      }
    },
    watch:{    
      //监听value属性
      value(){ 
        //this.$emit('调用的方法即model中的event','子组件input的值')
        this.$emit('dataToFather',`${this.value}`)   
      }
    },
    //声明model，这个model就是父组件绑定的model
    model:{  
      prop: 'nameFromFather',  // 绑定的props属性，这里是'nameFromFather'
      event: 'dataToFather'    // 触发父组件中v-model绑定的属性发生改变的方法，名称自取
    },
    props:{
      nameFromFather:String  //自定义属性，名称自取，这个属性接收父组件传递过来的数据
    }
  }