vue props 得不到自己想要的东西。

Question

vue中一个组件（子组件），在另一个组件（父组件）中用了两次，
父组件中定义两个data属性（引用数据类型,a:{c:[]},b{c:[]}），
两个data用同一个props的字段（attr）传到子组件中，在子组件中修改了attr的c属性的值，每个子组件中赋值不同。
在页面加载完毕，页面上两个子组件的props中的attr中的c属性的值变成一样的了。

单向数据流已经了解，以上描述为历史代码，接手后很难受。望勿吐槽。。

Answer 1

<template>
<div>
  <some-thing :attr="a"/>
  <some-thing :attr="b"/>
</div>
</template>

<script>
export default {
  data() {
    return {
      a: {
        c: []
      },
      b: {
        c: []
      }
    }
  }

}
</script>

根据你的描述我大概恢复出这个场景，比如第一个子组件attr.c.push(123)进行了非法的改动，理论上没有其他的逻辑，第二个子组件中的c并不会跟着修改。所以希望你能再多提供一些线索。不能提供源码，最好也能提供一个可以说明现象的demo。

实在也不想提供demo，接受这样的代码该改就改，子组件非法修改props的代码先删掉，改成正确的修改方式，抛事件也好，抽vuex也好，把明知道不对的地方先改掉。我猜a和b一个是原始数据，一个是用来提供修改的吧。然后修改数据不合法需要从原始数据恢复。还有一个我工作的经验，凡是传递了引用类型数据作props，最好展开成基础字段去传递，传一个对象看起来props是省事了，多参数函数也确实提倡把参数聚合成实体，但是写代码还是要灵活一点，把props打散并不是坏事，多层嵌套的props甚至还能提示你需要拆多层组件。