因?yàn)閜rops是單向數(shù)據(jù)流，所以我們有幾種方式去實(shí)現(xiàn)父子組件input輸入框雙向綁定。

方法一：props屬性 + input回調(diào)

父組件 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的值發(fā)生改變時(shí)觸發(fā)change事件（input事件是輸入框值發(fā)生改變的回調(diào)事件）-->
     <input type="text" :value="nameFromFather" @input="change"/>
    </div>
  </div>
</template>

  export default {
    name: 'child',
    //聲明model，這個(gè)model就是父組件綁定的model
    model:{
      prop: 'nameFromFather',  // 綁定的props屬性，這里是'nameFromFather'
      event: 'dataToFather'    // 觸發(fā)父組件中v-model綁定的屬性發(fā)生改變的方法，名稱自取
    },
    props:{
      nameFromFather:String  //自定義屬性，名稱自取，這個(gè)屬性接收父組件傳遞過來的數(shù)據(jù)
    }, 
    methods: {
      change(e){
        //this.$emit('調(diào)用的方法即model中的event','子組件input的值')
        this.$emit('dataToFather',e.target.value)
      }
    },
  }

因?yàn)槊糠N方法對(duì)于父組件的寫法是一樣的，只是子組件上有所不同，所以下面的方法我就不貼上父組件的代碼了，有需要的話，直接看方法一中父組件的寫法即可。

方法二：data屬性 + input回調(diào)

子組件 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數(shù)據(jù),與input輸入框的value值綁定
    data(){
      return {
        value:this.nameFromFather   //自定義屬性，名稱自取，使其值等于自定義的props屬性
      }
    },
    //聲明model，這個(gè)model就是父組件綁定的model
    model:{
      prop: 'nameFromFather',  // 綁定的props屬性，這里是'nameFromFather'
      event: 'dataToFather'    // 觸發(fā)父組件中v-model綁定的屬性發(fā)生改變的方法，名稱自取
    },
    props:{
      nameFromFather:String  //自定義屬性，名稱自取，這個(gè)屬性接收父組件傳遞過來的數(shù)據(jù)
    }, 
    methods: {
      change(e){
        //this.$emit('調(diào)用的方法即model中的event','子組件input的值')
        this.$emit('dataToFather',e.target.value)
      }
    },
  }

其實(shí)對(duì)比下來很明顯就能看到，方法一和方法二的不同就在于input輸入框綁定值的方式不一樣，一個(gè)是:value:nameFromFather,一個(gè)是v-model:"value"，那么為什么我們不直接用v-model："nameFromFather"呢？

其實(shí)原因很簡單，因?yàn)榻M件props屬性是單向數(shù)據(jù)流，如果它既接收父組件的數(shù)據(jù)又改變父組件的數(shù)據(jù)，那么數(shù)據(jù)綁定這塊就亂套了，到底誰是初始數(shù)據(jù)就說不清楚了，所以vue把v-model綁定props屬性的這種使用方式做了報(bào)錯(cuò)處理。

v-model=”props屬性“.png

仔細(xì)看報(bào)錯(cuò)圖片"Instead..."后面那串，其實(shí)我們的方法二和方法三就是上面描述的方法，"use a data or computed property based on the prop's value"

方法三：data屬性+watch監(jiān)聽

子組件 DemoChild

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

  export default {
    name: 'child',
     //利用data數(shù)據(jù),與input輸入框的value值綁定
    data(){
      return {
        value:this.nameFromFather  //自定義屬性，名稱自取，使其值等于自定義的props屬性
      }
    },
    watch:{    
      //監(jiān)聽value屬性
      value(){ 
        //this.$emit('調(diào)用的方法即model中的event','子組件input的值')
        this.$emit('dataToFather',`${this.value}`)   
      }
    },
    //聲明model，這個(gè)model就是父組件綁定的model
    model:{  
      prop: 'nameFromFather',  // 綁定的props屬性，這里是'nameFromFather'
      event: 'dataToFather'    // 觸發(fā)父組件中v-model綁定的屬性發(fā)生改變的方法，名稱自取
    },
    props:{
      nameFromFather:String  //自定義屬性，名稱自取，這個(gè)屬性接收父組件傳遞過來的數(shù)據(jù)
    }
  }