vue props 得不到自己想要的东西。
vue中一个组件(子组件),在另一个组件(父组件)中用了两次,
父组件中定义两个data属性(引用数据类型,a:{c:[]},b{c:[]}),
两个data用同一个props的字段(attr)传到子组件中,在子组件中修改了attr的c属性的值,每个子组件中赋值不同。
在页面加载完毕,页面上两个子组件的props中的attr中的c属性的值变成一样的了。
单向数据流已经了解,以上描述为历史代码,接手后很难受。望勿吐槽。。
回答:
<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甚至还能提示你需要拆多层组件。
以上是 vue props 得不到自己想要的东西。 的全部内容, 来源链接: utcz.com/p/935909.html