vue 自定義組件 通過v-model 實現父子組件數據的雙向綁定

  在父子組件的通信中，為了防止子組件不小心改變父組件的狀態，而導致數據流的冗余復雜、不易理解，所以vue規定了單向數據流，父組件的prop更新在子組件中會同時響應，而反過來則不能。但是我們依然可以通過v-model來實現數據的雙向綁定。

  v-model一般用在表單綁定數據，如：

<input v-model="value">

  等同於：

<input
  :value="inputValue"
  @input="value => {inputValue=value}">

 因此，在自定義組件中使用 v-model 指令，那么就意味着：

• 接收一個 value prop
• 觸發 input 事件，並傳入新值

利用 $emit 觸發 input 事件：

this.$emit('input', value);

 

第一種：

子組件

  <template>
   <div>
 // 使用時有v-model屬性，value默認值‘child’ 不會被渲染，而是v-model綁定的parent值被渲染，這兒value會被賦值為v-model綁定的parent的值。
     <p>{{value}}</p>
     <button @click="changeValue">在子組件內修改v-model值，並且動態響應給父組件</button>
   </div>
 </template> 
<script>
export default {
  props: {
    value: { // 必須要使用value
　   default: 'child',
    },
 },
 methods: {
    changeValue () {
      let newValue = '2'
      this.$emit('input',newValue) // 這兒必須用input 發送數據，發送的數據會被父級v-model=“parent”接收到，再被value=parent傳回來。
    }
 }
}

 該方法，一定要注意，props的值一定要定義為‘value’，不然不起作用，提交給父組件的事件名為‘input’

第二種（官網推薦的方法）

子組件

<template>
  <div>
     <p>{{parentProp}}</p>
      <button @click="changeValue">在子組件內修改prop值</button>
    </ul>
  </div>
</template>

<script>
  export default {
    model: {    // 使用model， 這兒2個屬性，prop屬性說，我要將msg作為該組件被使用時（此處為aa組件被父組件調用）v-model能取到的值，event說，我emit ‘cc’ 的時候，參數的值就是父組件v-model收到的值。
      prop: 'parentProp',
      event: 'change'
    },
    props: {
      msg: ''
    },
    methods: {
      changeValue () {
        this.$emit('change', this.parentProp++)
      }
    }
  }
</script>

 

在父組件引用：

<child v-model="parent"></child>　　

 總結：當然實現父子組件的雙向綁定，還有其他方案；

 例如：通過vuex狀態管理、使用.sync修飾符等。

            如有錯誤，請友情指出，好人一生平安～～