• 解决在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>

    最终异常消除。

    文章参考了此链接

     

  • 相关阅读:
    HDU_5057_分块
    HYSBZ_2002_分块
    HDU_1166_树状数组
    HDU_5692_dfs序+线段树
    多重背包
    二进制中一的个数
    康托展开
    vector, map, queue,set常用总结
    错误票据
    高精度计算
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/10499474.html
Copyright © 2020-2023  润新知