子组件更新时如何防止 props 重置？

Question

avatarid 和relationlist 是从父级传递过来的，当上传图片时，头像会改变，但是如果relationlist 发生变化（从RelationTable 组件中添加或删除项目），头像将重置为原始。

我认为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 中，道具只有 One-Way Data Flow。如果您打开浏览器开发工具，您应该会看到来自 Vue 的错误消息，告诉您这一点。

更改relationlist 有点工作，因为您正在就地更新数组（修改现有实例而不是替换它......这是不可能的数字等）但是如果您尝试其他方法（例如创建带有过滤器的新数组），它也会停止工作。

唯一正确的方法是发出事件并让父组件（数据所有者）进行修改（谷歌“支持事件向上”）。随着组件树的深度以及数据所有者和子组件之间距离的增加，这当然变得越来越难。这也是 Vuex 等全局状态管理工具存在的原因之一......

另一种方法是通过 Object 类型的单个 prop 传递数据。只要您只修改对象的属性（而不是替换对象本身），它就可以工作。但是这个不推荐并且被认为是反模式......