美文网首页
自定义v-model报错: Avoid mutating a p

自定义v-model报错: Avoid mutating a p

作者: 码农梦醒 | 来源:发表于2021-05-17 10:40 被阅读0次

    当我们使用父组件向子组件传值,当子组件中是v-model使用该值时会报:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

    原因为:在Vue 2.x中移除了组件的props的双向绑定功能,如果需要双向绑定需要自己来实现。

    解决方案:创建针对props属性的watch来同步组件外对props的修改(单向)

    <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>
    

    相关文章

      网友评论

          本文标题:自定义v-model报错: Avoid mutating a p

          本文链接:https://www.haomeiwen.com/subject/sbtjjltx.html