项目中遇到的问题

qianduan1020

于 2020-03-27 21:22:17 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： vue项目问题

本文链接：https://blog.youkuaiyun.com/qianduan1020/article/details/105139135

1 篇文章

订阅专栏

本文探讨了在Vue.js中使用props进行组件间传值时遇到的问题及解决方案。介绍了如何避免直接修改从父组件传入的值，推荐使用局部变量或computed属性进行值的转换与操作，同时指出了使用不同方法时可能遇到的坑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

避免直接修改父组件传入的值,因为会改变父组件的值

props:['listShop'],
    data(){
      return{}
    },
    created(){
      this.listShop=30
}

解决方案1：可以在data中重新定义一个变量
简单类型数据可以直接赋值，复杂数据就需要深度克隆了（JSON.parse(JSON.stringify(this.listShop));或者自己写深度克隆方法）

props:['listShop'],
    data(){
      return{
        listShopChild:this.listShop
      }
    },
    created(){
      this.listShopChild=30
    }

computed:{
  listShopChild(){
    return this.listShop
   }
}

方案2 存在的问题
注意:此时用computed时,如果是数组this.$set(arr,1,true)对应的值耶不更新，这个很坑，这个bug我找个很久
如果传入的值只是在data定义，并未在methods或生命周期钩子更改，直接改变也会报错
所以还是可以先用局部变量接收,再修改，这个坑比较多