解決在V2.0中子組件使用v-model接收來自父組件的值異常

當我們使用父組件向子組件傳值，當子組件中是v-model使用該值時會報：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

原因為：在Vue 2.x中移除了組件的props的雙向綁定功能，如果需要雙向綁定需要自己來實現。

解決辦法為：創建針對props屬性的watch來同步組件外對props的修改（單向）

在組件外（父組件）修改了組件的props，會同步到組件內對應的props上，再創建一個針對props屬性result的watch（監聽），當props修改后對應data中的副本myResult也要同步數據。代碼實例如下：

<template>
<div>
  <input v-model="myResult" placeholder="v-model里面的值來自外部"/>
</div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        myResult: this.result
      }
    },
    props: ["result"],
    watch: {
      result(val) {
        this.myResult = val;//新增result的watch，監聽變更並同步到myResult上
      }
    },
  }
</script>

<style>

</style>

最終異常消除。

文章參考了此鏈接。