如何在子组件更新时防止道具重置种子

Question

avatarid和relationlist是从父级传递的，当上传图像时，头像会发生更改，但如果关系列表发生更改(从关系表组件添加或删除项目(，头像会重置为原始。

我认为是RelationTable重新渲染导致父级重新加载。当子组件更新时，我如何停止这种重新设定种子。谢谢

<template>
<el-upload
class="avatar-uploader"
action
:http-request="uploadAvatar"
accept="image/jpeg,image/jpg,image/png"
:after-upload="uploadAvatarSucc"
>
<RelationTable ref="relationTable" :relationlist="relationlist" @delete="removeRelation" />
</template>
export default {
name: 'relation-component',
props: {
avatarid: {
type: String,
default: ''
},
relationlist: {
type: Array,
default: null
}
},
methods: {
uploadAvatarSucc(res) {
this.avatarid = res.imageId
},
removeRelation(index) {
if (this.relationlist.length > 0) {
this.relationlist.splice(index, 1)
}
}
}
}

Answer 1

您无法停止它-在Vue中，道具仅为单向数据流。如果您打开浏览器开发工具，您应该会看到来自Vue的错误消息，告诉您这一点。

更改relationlist是可行的，因为您正在原地更新数组(修改现有实例而不是替换它……这在数字等方面是不可能的(，但如果您尝试其他操作(例如使用筛选器创建新数组(，它也会停止工作。

只有正确的方法是发出事件，并让父组件(数据的所有者(进行修改(谷歌"向上支撑事件"(。当然，随着组件树的深度和数据所有者与子组件之间的距离的增加，这变得越来越困难。这也是像Vuex这样的全球国家管理工具存在的原因之一。。。。

另一种方法是通过Object类型的单个道具来传递数据。只要您只修改对象的属性(而不是替换对象本身(，它就会起作用。但这不推荐，并被认为是反模式