时间戳

首页 > 解决方案 > 子组件更新时如何防止 props 重置？

vue.js - 子组件更新时如何防止 props 重置？

问题描述

avatarid并且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)
      }
    }
  }
}

标签： vue.jsvuejs2vue-componentvue-router

解决方案

你无法阻止它——在 Vue 中，道具只是单向数据流。如果您打开浏览器开发工具，您应该会看到来自 Vue 的错误消息，准确地告诉您这一点。

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

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

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

推荐阅读