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

Question

avatarid 和 relationlist 是从父级传过来的，上传图片时，avatarid 改变了，但是如果 relationlist 改变了 avatarid 将重置为原来的（从 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。如果您打开浏览器 Dev Tools，您应该会看到来自 Vue 的错误消息告诉您这一点。

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

只有正确的绕过它的方法是发出事件并让父组件（数据的所有者）进行修改（google“支持向下事件向上”）。随着组件树的深度和数据所有者与子组件之间的距离增加，这当然变得越来越难。这就是为什么像 Vuex 这样的全局状态管理工具存在的原因之一....

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

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

How to prevent props from reseting when child component updates?

vue.js

vue-router

vue-component

vuejs2